How can I select array element using angular?

Question

   var options = [
          {name: ['black', 'green', 'black'], shade:'dark'},
          {name: ['white', 'black', 'white'], shade:'light'},
          {name: ['grey', 'white', 'yellow'], shade:'dark'},
          {name: ['red', 'black', 'red'], shade:'dark'},
          {name: ['yellow', 'green', 'black'], shade:'light'}
          ];

    var app = angular.module('module', []);
        app.controller('MainCtrl', function($scope) {
        $scope.options = options;
        $scope.$watch('myselect', function(val) {
        console.log(val);
    });
});
    </script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="option in options">
        <select ng-model="myselect" ng-options=" item for item in option.name"></select>
    </div>
  </body>

I am new at angular and even at web developing. I need to select one of the name's array element and send it to the server. I am trying to do it like this, but nothing happening. Thank you for any help.

@adrichman options variable don't have name property, it's correct — doodeec
– doodeec, Commented Apr 14, 2014 at 7:27

Vadim · Accepted Answer · 2014-04-14 08:27:57Z

1

There are several issues in your code and they are:

you bind all your selects to the same model myselect.
initial value of myselect model is not set.
in order to watch changes of object properties you should use true as the third parameter of watch()

HTML

<body ng-controller="MainCtrl">
    <div ng-repeat="option in options">
        <select ng-model="myselect[$index]" ng-options="item for item in option.name"></select>
    </div>
</body>

JavaScript

var options = [
  {name: ['black', 'green', 'black'], shade:'dark'},
  {name: ['white', 'black', 'white'], shade:'light'},
  {name: ['grey', 'white', 'yellow'], shade:'dark'},
  {name: ['red', 'black', 'red'], shade:'dark'},
  {name: ['yellow', 'green', 'black'], shade:'light'}
];

var app = angular.module('module', []);

app.controller('MainCtrl', function($scope) {
  $scope.options = options;
  $scope.myselect = {}; // <= set initial value to be an empty object
  $scope.$watch('myselect', function(val) {
    console.log(val);
  }, true); // <= use true as third parameter in order to watch object property changes
});

Here is a plunker with working example.

In order to send something to the server you can use Angular's build-in $http service.

edited Apr 14, 2014 at 8:27

answered Apr 14, 2014 at 8:21

Vadim

8,7744 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivan Over a year ago

Thanks a lot Vadim! The nice answer!

smallg · Accepted Answer · 2014-04-14 07:35:18Z

0

I think you missing some code like 'ng-app', and why do you add ng-repeat for div?
In fact, we only add ng-repeat for select element.

There is some example code for you:
example

answered Apr 14, 2014 at 7:35

smallg

2161 silver badge8 bronze badges

1 Comment

smallg Over a year ago

watch console, you can see some log when you change select.

Collectives™ on Stack Overflow

How can I select array element using angular?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related