11

我是新angularjs用户和角度用户界面。我对标签很感兴趣。

这是我的html：

<select id="part1" ui-select2 ng-model="params.id" style="width: 200px;">
    <option value="">Provinsi</option>
    <option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
    ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="part2" ui-select2 ng-model="params2.id" style="width: 200px;" ng-disabled="true">
    <option value="">Kabupaten</option>
    <option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
    ng-selected="y.id == params.id">{{y.text}}</option>
</select>

这是我的app.js：

$http.get('json/provinsiData.json').success(function(datax) {
    $scope.prov = datax;
});

//part2 data
$http.get('json/acehData.json').success(function(datay) {
    $scope.kab = datay;
});

$scope.params = {}
$scope.params2 = {}

如您所见select part2，已禁用。

如何创建类似于以下条件的事件更改？

if selected option of part1 is index 0
then select part2 disabled = false and load json part2 data.
4

2 回答 2

8

angular-js select 支持 ng-change 属性，该属性可以调用范围内定义的任何 javascript 方法。例子：

但是，您最好的选择可能只是评估 ng-disabled= 属性中的 $scope 表达式，例如 ng-disabled="params.id == 'X'"。

于 2013-05-31T15:47:41.650 回答
7

With Angular, we usually aren't looking for events to trigger changes. Instead, when the model changes, the view should update to reflect those changes.

In this case, the second element should be enabled (not disabled) depending on a value in the model. When the model value connected to the first select menu satisfies some condition, enable the second menu. Yes, technically there's an event, but we don't need to care about it, all that matters are the model's values.

Here's a simplified example of how this might work:

<select ng-model="selection.item">
  <option value="">Clothing</option>
  <option ng-repeat="item in clothes">{{ item }}</option>
</select>

<select ng-model="selection.size" ng-disabled="!selection.item">
  <option value="">Size</option>
  <option ng-repeat="size in sizes">{{ size }}</option>
</select>

The second select menu's ng-disabled attribute is a simple expression which basically evaluates to "disable me if selection.item does not have a value". That could just as easily be a more complex expression or a function.

Here's a plunkr based on the code above

于 2014-01-03T04:29:22.277 回答