0

2 つの動的オブジェクト配列があります。1 つは色用、もう 1 つはバス用です。目標は、バスに色を割り当てることです。したがって、ng-repeat を使用して各色のコードを選択し、次に ng-change を使用して updatebus 関数を呼び出し、色 ID を渡します。しかし、うまくいきません。色 ID は常に未定義です。

2 つの配列を持つバスに色を割り当てるにはどうすればよいですか? 私は何を間違っていますか？

私はこの答えを見てみました: ng-change で選択された ng-object を取得する

プランカー

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - combining two arrays</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
</head>
<body ng-app="selectExample">
  <script>
angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {

    $scope.colors = [
      {name:'black', id:'a'},
      {name:'white', id:'b'},
      {name:'red', id:'c'},
      {name:'blue', id:'d'},
      {name:'yellow', id:'e'}
    ];

    $scope.buses = [
      {name:'bus 1', colorid:''},
      {name:'bus 2', colorid:''}
    ];

    $scope.theBus = $scope.buses[1]; // red

    $scope.updatebus = function(bus, id){
      //alert(id); // undefined
      $scope.theBus = bus;
      bus.cid = id;
    };
  }]);
</script>
<div ng-controller="ExampleController">

<p>
  Bus Color:
  <div ng-repeat="bus in buses">
  {{bus.name}} 
    <select ng-model="myColor" 
    ng-options="color.name for color in colors" 
    ng-change="updatebus(bus, color.id)">
      <option value="">-- choose color --</option>
    </select>
    <p>
  </div>
  <div>
    the bus "{{theBus.name}}" has color id "{{theBus.colorid}}"
  </div>

</div>
</body>
</html>
4

2 に答える 2

1

の の色を の として使用する必要busがng-repeatありng-modelますselect。そうすれば、各バスで選択した色に完全にアクセスできます。

<select ng-model="bus.color" 
    ng-options="color.name for color in colors" 
    ng-change="updatebus(bus)">

すべての割り当ては html バインディングで行われ、ng-change残りは表示目的のみです。

見てください、私はそれを機能させるためにいくつかの小さな変更を加えました：

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

それが役立つことを願っています

于 2015-01-29T19:44:00.100 に答える
1

ここには 2 つの問題がありました。

  • タイプミスがありました:bus.cid = id;
  • そして、あなたの表現はng-change意味がありませんでした: updatebus(bus, color.id). color? どれcolor？たくさんあります。

これを修正する 1 つの方法:

bus.colorid = id;

<select ng-model="myColor" 
ng-options="color.id as color.name for color in colors" 
ng-change="updatebus(bus, myColor)">

Plunkr の更新: http://plnkr.co/edit/571TY2dC8cmLSPA7AAIv?p=preview

または、選択権をバインドするだけですbus.colorid（バスに初期色値がある場合、ドロップダウンに正しい値を表示できるため、実際にはこれがより良いアプローチだと思います）：

<select ng-model="bus.colorid" 
ng-options="color.id as color.name for color in colors" 
ng-change="updatebus(bus)">

$scope.updatebus = function(bus){
  //alert(bus.name); // undefined
  $scope.theBus = bus;
};
于 2015-01-29T19:44:33.160 に答える