ng-modelが到着しません

Question

ng-model = itemFilterは未定義ですが、最初のdivにng-model = itemが届きます。私は間違いをしていますか？

コードHTML。

<div 
      style="width: 19%; float: left; margin-right: 20px; display: inline-block;"> 
      <select class="form-control" 
       ng-options="item as item.value for item in listItemBook" 
       ng-model="item" ng-change="addFilter(item)"> 
       <option value="">Seleccione una opción</option> 
      </select> 

     </div> 

     <div ng-if="itemBooks" 
      style="width: 19%; float: left; margin-right: 20px; display: inline-block;"> 
      <select class="form-control" 
       ng-options="itemFilter as itemFilter.name for itemFilter in listFilter" 
       ng-model="itemFilter"> 
       <option value="" selected>Seleccione una opción</option> 
      </select> 
     </div> 

コードJS。

Answer 1

問題は、スコープ内の変数を直接参照することです。スコープ変数のプロパティを常に参照する必要があります。

function TodoCtrl($scope) { 
 
$scope.listItemBook = [ 
 
\t {value: "book1"}, 
 
\t {value: "book2"}, 
 
\t {value: "book3"}, 
 
\t {value: "book4"}, 
 
]; 
 
$scope.listFilter = [ 
 
    {name: "old"}, 
 
    {name: "new"} 
 
]; 
 
$scope.selection = {}; 
 
$scope.search = function() { 
 
     $scope.result = true; 
 
      alert("itemFilter="+JSON.stringify($scope.selection.itemFilter)+", item="+JSON.stringify($scope.selection.item)); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <h2>Todo</h2> 
 
    <div ng-controller="TodoCtrl"> 
 
<div 
 
      style="width: 19%; float: left; margin-right: 20px; display: inline-block;"> 
 
      <select class="form-control" 
 
       ng-options="item as item.value for item in listItemBook" 
 
       ng-model="selection.item" ng-change="addFilter(item)"> 
 
       <option value="">Seleccione una opción</option> 
 
      </select> 
 

 
     </div> 
 

 
     <div ng-if="listItemBook" 
 
      style="width: 19%; float: left; margin-right: 20px; display: inline-block;"> 
 
      <select class="form-control" 
 
       ng-options="itemFilter as itemFilter.name for itemFilter in listFilter" 
 
       ng-model="selection.itemFilter"> 
 
       <option value="" selected>Seleccione una opción</option> 
 
      </select> 
 
     </div> 
 
     <button ng-click="search();">Search</button> 
 
     </div> 
 
</div>

だからxxxxx.itemFilter代わりの項目フィルタを使用しても、このXXXXXを定義します。