0

json ファイルから入力された<select>要素があります。

<select ng-model="selected_ad" ng-options="ad.title for ad in ads">
  <option value="">Select an Ad</option>
</select>

<option>ボタンを使用して値属性を変更することは可能でしょうか?

例えば...

select要素の出力は次のとおりです。

<select ng-model="selected_ad" ng-options="ad.title for ad in ads" class="ng-valid ng-dirty">
<option value="" class="">Select an Ad</option>
<option value="0">Business Development 1</option>
<option value="1">Business Development 2</option>
<option value="2">Business Development 3</option>
<option value="3">Business Development 4</option>
...

おそらくng-click各要素をループして、選択したオプションを動的に変更するボタンを作成できますか? 少し遊んでみましたが、ドキュメントに関連するものが見つかりません。

4

2 に答える 2

3

おそらく、ng-options で Object 構文のいずれかを使用する必要があります。

select as label for (key , value) in object

または配列構文:

select as label for value in array

これにより、オプションの表示ラベル (表示されるもの) と ng-model の値オプションの両方が設定されます。

現在、使用しlabel for value in arrayているときは、オプションのラベルのみを設定しています。データ モデル $scope.ads が次のようになるとします。

$scope.ads = [
    { title = 'Business Development 1',
      value = 'bizdev1'
    },
    { title = 'Business Development 2',
      value = 'bizdev2'
    }....
    ];

その後、 を使用するng-options = 'ad.value as ad.title for ad in ads'と、表示されるオプションは同じままですが、オプションの 1 つを選択するとng-model、数値だけでなくオブジェクトの値が含まれるようになります。

値を動的に変更する必要がある場合 - jQuery ループで何かをループする必要はありません。Angular には 2 方向のデータ バインディングがあるため、$scope.ads要素selectの値の値を変更すると、それに合わせて変更されます。

詳細については、http://docs.angularjs.org/api/ng.directive:selectをご覧ください。

編集- ng クリック後に実際の値自体を変更したい場合は、データをループして 1 ずつインクリメントすることで変更できます (その場合、値を整数のままにしておく方が理にかなっています。

特定のオプションを選択するボタンのみが必要な場合 (入力ボックスから ng-model を使用するなど)、 select ng-modelを変更することで実行できますselected_ad。選択したいものの値に変更します。

edit 2 - データセットを次のように変更するだけです:

$scope.selected_ad = 1;

$scope.ads = [
{ title = 'Business Development 1',
  value = 1
},
{ title = 'Business Development 2',
  value = 2
}
];

コントローラーのロジック変更を追加します。

$scope.changeSelection = function(e) {
   e.stopPropagation();
   e.preventDefault();
   ++$sccope.selected_ad;
}

そして、あなたのselect dom要素で：

<select ng-model="selected_ad" ng-options ='ad.value as ad.title for ad in ads' ng-click="changeSelection($event)">

それはそれを修正する必要があります。

于 2013-09-05T06:23:27.010 に答える
1

配列 (またはオブジェクト)からすべてのデータを取得し、adsAngular はデータの変更を追跡できるため、オプションを更新するために元のデータ セットを変更することができます。たとえば、次の関数は値を 10 ずつ増やします。

 $scope.switchAds = function () {
    $scope.ads.forEach(function (ad) {
      ad.value += 10;
    });
  };

実施例。

于 2013-09-05T06:35:05.170 に答える