javascript - AngularJS, select onChange or ngChange - Stack Overflow

admin管理员组

文章数量:1208155

I'm new using angularjs and the angular user interface. I'm interested in the tag.

This is my 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>

and this my 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 = {}

As you can see select part2 is disabled.

How can I create an event change that works like the condition below?

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

I'm new using angularjs and the angular user interface. I'm interested in the tag.

This is my 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>

and this my 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 = {}

As you can see select part2 is disabled.

How can I create an event change that works like the condition below?

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

• javascript
• angularjs

Share Improve this question Follow edited Jan 3, 2015 at 14:41 ErstwhileIII 4,84322 gold badges2525 silver badges3737 bronze badges asked Apr 22, 2013 at 8:26 yozawiratamayozawiratama 4,3181212 gold badges6565 silver badges108108 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 8

The angular-js select supports the ng-change attribute which may call any javascript method defined in scope. Example:

However your best bet may be just to evaluate an $scope expression in your ng-disabled= attribute, e.g. ng-disabled="params.id == 'X'".

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

本文标签： javascriptAngularJSselect onChange or ngChangeStack Overflow