观看Angularjs中的选择项目

Question

我有一个包含一组下拉菜单以选择标准的div。我们可以使用加号和减号按钮添加或删除条件。填充下拉列表的值是从API中获取的。

用于UI的代码如下：

<form novalidate="" role="form" name="filterForm" class="form-inline"> 
    <div ng-repeat="criteria in criterias"> 
    <div class="m-b"> 
     <div class="form-group s-b" style="width: 150px;"> 
     <span>Country</span> 
     <select class="form-control" ng-options="item for item in country" name="account" ng-model="criteria.country" style="max-width:100%"></select> 
     </div> 
     <div class="form-group s-b" style="width: 150px;"> 
     <span>State</span> 
     <select ng-options="item for item in state" class="form-control" name="account" ng-model="criteria.state" style="max-width:100%"></select> 
     </div> 
     <div class="form-group s-b" style="width: 150px;"> 
     <span>City</span> 
     <select class="form-control" ng-options="item for item in city" name="account" ng-model="criteria.city" style="max-width:100%;"></select> 
     </div> 
     <div class="form-group s-b" style="width: 150px;"> 
     <span>Predicate</span> 
     <select class="form-control" name="account" ng-model="criteria.predicate" style="max-width:100%"> 
      <option value="matches">Matches</option> 
      <option value="not-matches">Not Matches</option> 
     </select> 
     </div> 
     <div class="form-group s-b" style="width: 100px;"> 
     <span>Value</span> 
     <select class="form-control" ng-options="item for item in value" name="account" ng-model="criteria.value" style="max-width:100%;"></select> 
     </div> 
     <div class="form-group s-b" style="margin-top: 20px;"> 
     <span> 
      <button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()"> 
      <i class="fa fa-plus"></i> 
      </button> 
      <button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)"> 
      <i class="fa fa-minus"></i> 
      </button> 
     </span> 
     </div> 
    </div> 
    </div> 
    <button class="btn btn-sm btn-primary pad-btn align-center" type="submit" ng-click="searchParams(filterForm)">Submit 
         <i class="fa fa-check"></i> 
    </button> 
    <button class="btn btn-sm btn-warning pad-btn align-center" type="submit" ng-click="resetFilter()">Reset 
         <i class="fa fa-reply"></i> 
    </button> 
</form> 

我需要留意的下拉和处理用于相应的标准的事件，并更新该标准其它相应的下拉元件。请让我知道如何处理$ watch元素，当用户添加使用加号按钮时有很多标准，因为我不是AngularJs上的高级程序员。

更新问题

基础上的建议，我已经使用了ng-change代替$watch，我现在能够处理该事件，并也得到了参考criteria对象。处理事件后，我需要更新所选country的state值。我已经用下面的代码更新了Plnkr链接，但即使在使用$scope.criterias[index] = user;更新了范围后，state下拉列表也没有得到更新。请让我知道如果我失去了一些东西。

更新的代码来处理更改事件：

$scope.handleClassification = function(index){ 
     var user = $scope.criterias[index]; 
     user.config=["California"]; 
     $scope.criterias[index] = user; 
     console.log(user); 

    } 

我提供更新plnkr链接查看更多细节 - Plnkr

Answer 1

试试这个way..I猜你想在一个级联更新select方法...

你的HTML文件：

<div ng-controller="StaticCtrl"> 
     <h1>Static - Oriented</h1> 
     <p>This approach may be better when you have the entire dataset</p> 
    <div> 
     Country: 
     <select id="country" ng-model="cities" ng-options="country for (country, cities) in countries" ng-change="onChange()"> 
      <option value=''>Select</option> 
     </select> 
    </div> 
    <div> 
     State: <select id="city" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select> 
    </div> 
    <div> 
     City: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>   
    </div> 
    </div> 

和您的JS：

function StaticCtrl($scope) { 
    $scope.countries = { 
    'India': { 
     'UP': ['Noida', 'Lucknow', 'Agra'], 
     'Maharashtra': ['Mumbai'] 
    }, 
    'USA': { 
     'San Francisco': ['SOMA', 'Richmond', 'Sunset'], 
     'Los Angeles': ['Burbank', 'Hollywood'] 
    }, 
    'canada': { 
     'People dont live here': ['igloo', 'cave'] 
    } 
    }; 
    $scope.onChange = function() { 
    console.log("Asdasd"); 
    $scope.suburb = ''; 
    } 
} 

Here是小提琴..