Javascript 尝试使用$scope.$watch和controllerAs_Javascript_Angularjs

Javascript 尝试使用$scope.$watch和controllerAs

javascript angularjs

Javascript 尝试使用$scope.$watch和controllerAs,javascript,angularjs,Javascript,Angularjs,我正在用AngularJS建立一个状态自动完成 html似乎没有响应$scope.$watch，尽管我可以通过console.logs看到this.filteredStates最初被分配到状态，然后在输入中键入内容时更改。少了什么 angular.module('stateAutocomplete', []) .controller('stateAutocompleteCtrl', function($scope) { var states = ["Alabama", "Alas

我正在用AngularJS建立一个状态自动完成

html似乎没有响应$scope.$watch，尽管我可以通过console.logs看到this.filteredStates最初被分配到状态，然后在输入中键入内容时更改。少了什么

angular.module('stateAutocomplete', [])
  .controller('stateAutocompleteCtrl', function($scope) {


    var states = ["Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District Of Columbia", "Federated States Of Micronesia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Marshall Islands", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio", "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virgin Islands", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

    this.filteredStates = [];

    $scope.$watch(angular.bind(this, function() {
        return this.input;
      }), function(newVal, oldVal) {
        if (newVal === oldVal) {
          this.filteredStates = states;
        } else {
          this.filteredStates = states.filter(function(state) {
            state = state.toLowerCase();
            var lowerCaseInput = newVal.toLowerCase();
            return state.indexOf(lowerCaseInput) > -1;
          })
        }
    })
  }) 




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="stateAutocomplete">
  <div  ng-controller="stateAutocompleteCtrl as state" class="container">
    <input ng-model="state.input" class="autocomplete"></input>
    <ul ng-repeat="state in state.filteredStates">
      <li>{{state}}</li>
    </ul>
  </div>
  <script src="app.js"></script>
</body>

angular.module（'stateautomplete'，[]）
.controller（'stateAutompletectrl'，函数（$scope）{
var州=[“阿拉巴马州”、“阿拉斯加”、“美属萨摩亚州”、“亚利桑那州”、“阿肯色州”、“加利福尼亚州”、“科罗拉多州”、“康涅狄格州”、“特拉华州”、“哥伦比亚特区”、“密克罗尼西亚联邦”、“佛罗里达州”、“乔治亚州”、“关岛”、“夏威夷州”、“爱达荷州”、“伊利诺伊州”、“印第安纳州”、“爱荷华州”、“堪萨斯州”、“肯塔基州”、“路易斯安那州”、“缅因州”、“马绍尔群岛”、“马里兰州”，“马萨诸塞州”、“密歇根州”、“明尼苏达州”、“密西西比州”、“密苏里州”、“蒙大拿州”、“内布拉斯加州”、“内华达州”、“新罕布什尔州”、“新泽西州”、“新墨西哥州”、“纽约州”、“北卡罗来纳州”、“北达科他州”、“北马里亚纳群岛”、“俄亥俄州”、“俄克拉荷马州”、“俄勒冈州”、“帕劳州”、“宾夕法尼亚州”、“波多黎各州”、“罗德岛州”、“南卡罗来纳州”、“南达科他州”田纳西州、德克萨斯州、犹他州、佛蒙特州、维尔京群岛、弗吉尼亚州、华盛顿州、西弗吉尼亚州、威斯康星州、怀俄明州]；
this.filteredStates=[]；
$scope.$watch（angular.bind（this，function（））{
返回此.input；
})，函数（newVal，oldVal）{
如果（newVal==oldVal）{
this.filteredStates=状态；
}否则{
this.filteredStates=states.filter（函数（状态）{
state=state.toLowerCase（）；
var lowerCaseInput=newVal.toLowerCase（）；
返回状态.indexOf（小写输入）>-1；
})
}
})
}) 
文件

{{state}}

问题在于您忘记了绑定$watch中的第二个函数。下面的代码可以正常工作；（但很难看）

将变量绑定到控制器的更好方法是在闭包中引入一个“vm”变量，如下所示：（有关“为什么”的更好解释，请参见示例：）

问题是您忘记了绑定$watch中的第二个函数

将变量绑定到控制器的更好方法是在闭包中引入一个“vm”变量，如下所示：（有关“为什么”的更好解释，请参见示例：）

您可以在设置

filteredStates

后尝试

$scope.apply（）

，您可以在设置

filteredStates

后尝试

$scope.apply（）

angular.module('stateAutocomplete', [])
  .controller('stateAutocompleteCtrl', function($scope) {
    var states = ["Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District Of Columbia", "Federated States Of Micronesia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Marshall Islands", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio", "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virgin Islands", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

    this.filteredStates = [];

    $scope.$watch(
      angular.bind(this, function () { 
        return this.input; 
      }), 
      angular.bind(this, function(newVal, oldVal) {
        if (newVal === oldVal) {
          this.filteredStates = states;
        } else {
          this.filteredStates = states.filter(function(state) {
            state = state.toLowerCase();
            var lowerCaseInput = newVal.toLowerCase();
            return state.indexOf(lowerCaseInput) > -1;
          });
        }
      })
    );
  });

angular.module('stateAutocomplete', [])
  .controller('stateAutocompleteCtrl', function($scope) {
    var vm = this;

    var states = ["Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District Of Columbia", "Federated States Of Micronesia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Marshall Islands", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio", "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virgin Islands", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

    vm.filteredStates = [];

    $scope.$watch(
      function () { 
        return vm.input; 
      }, 
      function (newVal, oldVal) {
        if (newVal === oldVal) {
          vm.filteredStates = states;
        } else {
          vm.filteredStates = states.filter(function (state) {
            state = state.toLowerCase();
            var lowerCaseInput = newVal.toLowerCase();
            return state.indexOf(lowerCaseInput) > -1;
          });
        }
      }
    );
  });