admin管理员组

文章数量:1429658

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>

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>
  • javascript
  • arrays
  • angularjs
  • angularjs-ng-change
Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Jan 29, 2015 at 19:35 jaycerjaycer 3,1212 gold badges29 silver badges37 bronze badges 2
  • 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

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

本文标签： javascriptHow to use AngularJS to update an object array based on a selection changeStack Overflow

版权声明：本文标题：javascript - How to use AngularJS to update an object array based on a selection change - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745533926a2662185.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。