觀看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是小提琴..