Question

我正在使用ng-if尝试根据所选的州过滤掉城市。出于某种原因，当选择州时， city 选择框会消失。

var app = angular.module('App', ['angular.filter']);

app.controller("Ctrl", function($scope) {
  $scope.message = "Choose a Popular City";
  $scope.data = [
    { city: 'New York',     state: 'New York',      population: 8175133 },
    { city: 'Los Angeles',  state: 'California',    population: 3792621 },
    { city: 'Chicago',      state: 'Illinois',      population: 2695598 },
    { city: 'Huston',       state: 'Texas',         population: 2099451 },
    { city: 'Philadelphia', state: 'Pennsylvania',  population: 1526006 },
    { city: 'Phoenix',      state: 'Arizona',       population: 1445632 },
    { city: 'San Antonio',  state: 'California',    population: 1327407 },
    { city: 'San Diego',    state: 'California',    population: 1307402 },
    { city: 'Dallas',       state: 'Texas',         population: 1197816 },
    { city: 'San Jose',     state: 'California',    population:  945942 }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body ng-app="App">
  <div ng-controller="Ctrl" class="container">
    <h1>{{message}}</h1>
    <form>
      <div class="form-group">
        <label>Country</label>
        <select name="state" class="form-control"
                ng-model="state"
                ng-init="state = state || options[0]"
                ng-options="option.state for option in data|unique:'state'|orderBy:'state'">
        </select>
      </div>
      <div class="form-group">
        <label>City</label>
        <select name="city" class="form-control"
                ng-model="city"
                ng-options="option.city for option in data"
                ng-if="option.state == state"
                ng-disabled="!country">
        </select>
      </div>
      <br />
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</body>

数据来自：Largest cities in the United States by population by decade, Wikipedia.

Answer 1

您的城市下拉列表存在问题，请将代码更改为

<select name="city" class="form-control"
      ng-model="city"
      ng-options="option.city for option in data |filter:state.state"               
      ng-disabled="!state">
</select>

没有国家/地区，您的模型是state

NG-禁用= “！国家”
ng-if用于条件渲染，你想要实现的目标不明确

ng-if =“option.state == state”

Answer 2

尝试这样看它是否有效，没时间测试它。

<select name="city" class="form-control" ng-model="city" ng-if="option.state == state" ng-disabled="!country">
     <option ng-repeat="option.city for option in data"
        value="{{option.city}}" ng-if="option.state == state">
  {{option.city}}
      </option>
</select>

希望有所帮助：）

Answer 3

尝试这样的事情。

 <select name="city" class="form-control"
  ng-model="city"
  ng-options="option.city for option in data | filter:{ city : state }"
  ng-disabled="!country">
 </select>

过滤掉选定表单项中的子项

3 个答案: