11

私はangularjsAngularユーザーインターフェイスを初めて使用しています。タグ気になります。

これは私の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 は、スコープで定義された任意の JavaScript メソッドを呼び出すことができる ng-change 属性をサポートします。例：

ただし、最善の策は、ng-disabled= 属性で $scope 式を評価することです (例: ng-disabled="params.id == 'X'")。

于 2013-05-31T15:47:41.650 に答える
7

Angular では、通常、変更をトリガーするイベントを探していません。代わりに、モデルが変更されたときに、それらの変更を反映するようにビューを更新する必要があります。

この場合、モデルの値に応じて、2 番目の要素を有効にする (無効にするのではなく) 必要があります。最初の選択メニューに接続されたモデル値が何らかの条件を満たしている場合、2 番目のメニューを有効にします。はい、技術的にはイベントがありますが、気にする必要はありません。重要なのはモデルの値だけです。

これがどのように機能するかの簡単な例を次に示します。

<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>

2 番目の選択メニューのng-disabled属性は、基本的に「値がない場合は無効にする」selection.itemと評価される単純な式です。それは簡単に、より複雑な式や関数になる可能性があります。

上記のコードに基づく plunkr は次のとおりです。

于 2014-01-03T04:29:22.277 に答える