观看 Angularjs 中的选择项

Question

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

用户界面代码如下：

<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

试试这种方式..我猜你想以级联方式更新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 是小提琴..