Как использовать AngularJS для обновления массива объектов на основе изменения выбора

У меня есть два массива динамических объектов. Один для цветов, один для автобусов. Цель состоит в том, чтобы назначить цвет автобусу. Таким образом, используя ng-repeat, код создает выбор для каждого цвета, а затем использует ng-change для вызова функции updatebus, передавая идентификатор цвета. Но это не работает. Идентификатор цвета всегда не определен.

Как я могу назначить цвет на шину с двумя массивами? Что я делаю неправильно?

Я попытался посмотреть на этот ответ: получение ng-объекта, выбранного с помощью ng- изменить

Планкер

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

javascript arrays angularjs angularjs-ng-change
person jaycer    schedule 29.01.2015    source источник
comment
Метод ng-change не является частью повторения в ng-options. Он определяется один раз и не имеет переменной «цвет».   -  person Herms    schedule 29.01.2015
comment
согласовываться с именами ваших свойств. У вас есть bus.cid = id, но у вас есть colorid в качестве имени свойства в массиве buses   -  person Patrick Evans    schedule 29.01.2015

Ответы (2)


arrow_upward
1
arrow_downward

Здесь было две проблемы:

  • У вас опечатка: bus.cid = id;
  • И ваше выражение в ng-change не имело никакого смысла: updatebus(bus, color.id). color? Какой color? Их целая куча.

Один из способов исправить это:

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;
};
person JLRishe    schedule 29.01.2015
comment
Спасибо, да, второй выбор, привязанный к bus.colorid, - это путь. - person jaycer; 30.01.2015

arrow_upward
1
arrow_downward

Вы должны использовать цвет 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

надеюсь, это поможет

person Fedaykin    schedule 29.01.2015
comment
Я не думаю, что вам нужен color.id в вызове updatebus. «цвет» не существует в этой области. - person Herms; 29.01.2015
comment
Спасибо, это помогло, но да, я не хочу, чтобы там было bus.color. - person jaycer; 30.01.2015