javascript - How to use AngularJS to update an object array based on a selection change

I have two dynamic object arrays. One for colors, one for buses. The goal is to assign a color to a bus. So, using ng-repeat the code create selects for each color, then using ng-change to call a the updatebus function, passing in the color id. But, it doesn't work. The color id is always undefined.

How can I assign the color to the bus with two arrays? What am I doing wrong?

I tried looking at this answer: getting the ng-object selected with ng-change

Plunker

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - bining two arrays</title>
  <script src="//ajax.googleapis/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>

How can I assign the color to the bus with two arrays? What am I doing wrong?

I tried looking at this answer: getting the ng-object selected with ng-change

Plunker

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - bining two arrays</title>
  <script src="//ajax.googleapis./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>

Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Jan 29, 2015 at 19:35 jaycer 3,1212 gold badges29 silver badges37 bronze badges

The ng-change method is not part of the "repeat" in ng-options. It's defined once, and doesn't have a 'color' variable. – Herms Commented Jan 29, 2015 at 19:42
be consistent with your property names. You have bus.cid = id but you have colorid as the property name in the buses array – Patrick Evans Commented Jan 29, 2015 at 19:45

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

There were two problems here:

You had a typo: bus.cid = id;
And your expression in ng-change didn't make any sense: updatebus(bus, color.id). color? Which color? There's a whole bunch of them.

One way to fix this:

bus.colorid = id;

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

Updated Plunkr: http://plnkr.co/edit/571TY2dC8cmLSPA7AAIv?p=preview

Or just bind your select right to bus.colorid (I would say this is actually the better approach as it will allow the dropdown to show the correct value if your buses have initial color values):

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

You should use the color of the bus from your ng-repeat as the ng-model of your select. That way you have full access to the selected color for each bus.

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

All the assignments are done in the html bindings, the ng-change remains only for display purposes.

Please have a look, I made some minor changes in order to make it work:

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

Hope that helps

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745533927a4631819.html

javascript - How to use AngularJS to update an object array based on a selection change - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to use AngularJS to update an object array based on a selection change - Stack Overflow

2 Answers 2

相关推荐