观看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对象的引用。处理完活动后，我需要更新所选state的{​​{1}}值。我已使用下面的代码更新了Plnkr链接，但即使在使用country更新范围后，state下拉列表也未获得更新。如果我遗失了什么，请告诉我。

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

$scope.criterias[index] = 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是小提琴......