ng-change 不工作 angularjs

Question

我正在创建一个 Web 应用程序，其中有两个下拉列表，我想更改下拉列表 1 上的下拉列表 2 的数据更改

<tr>
    <td>
        state
    </td>
    <td>
        <select ng-change="gcity()" ng-init="state = 'state'" ng-model="state">
            <option ng-repeat="o in statefunc" value="state">{{o.state}}</option>
        </select>
    </td>
</tr>
<tr>
    <td>
        City
    </td>
    <td>
        <select ng-init="city = 'select'" ng-model="city">
            <option ng-repeat="o in city" value="city">{{o.city}}</option>
        </select>
    </td>
</tr>

这是我的下拉列表，如果我选择一个特定的州，城市应该按照我的州进行填充

但它不起作用，甚至在控制台中也不显示任何数据，

然后我尝试了 ng-click

<tr>
    <td>
        state
    </td>
    <td>
        <select ng-click="gcity()" ng-init="state='state'" ng-model="state">
            <option ng-repeat="o in statefunc" value="state">{{o.state}}</option>
        </select>
    </td>
</tr>
<tr>
    <td>
        City
    </td>
    <td>
        <select ng-init="city='select'" ng-model="city">
            <option ng-repeat="o in city" value="city">{{o.city}}</option>
        </select>
    </td>
</tr>

ng-click 工作正常，但我想使用不起作用的 ng-change，知道吗？

Answer 1

我认为你在所有选项中都有相同的价值

value="state"

尝试

<option ng-repeat="o in statefunc" value="{{o.state}}">{{o.state}}</option>

例子：

http://plnkr.co/edit/aVp4d1JcYWUCdvLYiNb3?p=preview

Answer 2

在选择标签中使用ng-option而不是option 。看看下面的例子。

<select ng-init="state='state'" ng-options='o.state for o in statefunc' 
ng-change="gcity()" ng-model="state">
</select>

Answer 3

现在试试这个，我已经为你准备了演示。

 function CountryController($scope) { $scope.countries = { 'india': { 'india city 1': [], 'india city 2': [], 'india city 3': [], 'india city 4': [], }, 'Us': { 'Us city 1': [], 'Us city 2': [], 'Us city 3': [], 'Us city 4': [] }, 'Australia': { 'Australia city 1': [], 'Australia city 2': [], 'Australia city 3': [], 'Australia city 4': [] } }; }

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <div ng-app="" class="container"> <div ng-controller="CountryController"> <div class="form-group"> <label class="control-label" for="Country">Estado:</label> <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries"> <option value=''>Select</option> </select> </div> <br> <div class="form-group"> <label class="control-label" for="States">Municípios:</label> <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states"> <option value=''>Select</option> </select> </div> </div> </div>

Answer 4

我建议使用不同的 json 数组，如下所示。 唯一的区别是 state 是一个 state 对象数组，而不是一个 state 到城市的键值对。 when a state is selected the ng-model is state object with name and cities. 您只能提交州名，不能提交城市列表，这可以在提交时完成。 有了这个，两个选择都使用 ngOptions 选择的数组选项。

JS

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.data = {
        "states": [{
            "name": "Maharashtra",
            "cities": ["Pune", "Mumbai", "Nagpur"]
        }, {
            "name": "Gujarat",
            "cities": ["Surat", "Ahmedabad", "Baroda"]
        }, {
            "name": "Rajasthan",
            "cities": ["Jaipur", "Ajmer", "Jodhpur"]
        }]
    }
});

HTML

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <table>
        <tr>
            <td>
                state
            </td>
            <td>
                <select ng-model="state" ng-options="state.name for state in data.states">
          <option value=''>Select</option>
          </select>
            </td>
        </tr>
        <tr>
            <td>
                City
            </td>
            <td>
                <select ng-disabled="!state" ng-model="city" ng-options="city for city in state.cities">
            <option value=''>Select</option>
        </select>
            </td>
        </tr>
    </table>
</body>

</html>

Plunkr： http ://plnkr.co/edit/mtMdbUveeJKMRqmpvHyI?p=preview

ng-change 不工作 angularjs

问题描述

4 个解决方案

解决方案1
1 2016-10-17 09:55:59

解决方案2
0 2016-10-17 09:08:25

解决方案3
0 2016-10-17 09:11:11

解决方案4
0 已采纳 2016-10-17 11:59:24

ng-change 不工作 angularjs

问题描述

4 个解决方案

解决方案1 1 2016-10-17 09:55:59

解决方案2 0 2016-10-17 09:08:25

解决方案3 0 2016-10-17 09:11:11

解决方案4 0 已采纳 2016-10-17 11:59:24

解决方案1
1 2016-10-17 09:55:59

解决方案2
0 2016-10-17 09:08:25

解决方案3
0 2016-10-17 09:11:11

解决方案4
0 已采纳 2016-10-17 11:59:24