Data binding with ng-option dropdown in Angular

Question

I have a dropdown and I want to display a value based on the dropdown selection in Angular. I am using ng-options and figure a simple data binding should work, but the data binding isn't showing up. Here's a plunker: http://plnkr.co/edit/IptAt3e5EZi15OObfWFr?p=preview

      <select ng-model="defcom"
        ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >
      </select>
      <select ng-model="defcust"
        ng-options="opt.Customer as opt.Customer for opt in cust_info | filter: {Com: defcom}: true">
      </select>
      <p>{{ cust_info.Name }}</p>

in the controller:

$scope.cust_info = [
      {
        "Customer": "1",
        "Com": "1",
        "Name": "First Name"
      },
      {
        "Customer": "2",
        "Com": "1",
        "Name": "Second Name"
      },
      {
        "Customer": "3",
        "Com": "4",
        "Name": "Third Name"
      }];

J Kiran · Accepted Answer · 2016-04-12 00:24:45Z

0

{{cust_info[defcust-1].Name}} should work as expected

answered Apr 12, 2016 at 0:24

J Kiran

9

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

Comments

theblindprophet · Accepted Answer · 2016-04-12 17:43:53Z

0

In this line:

{{cust_info.Name}}

you are trying to reference Name incorrectly, you have an array of objects which each have Name therefore that will not work.

Change it to:

{{cust_info[defcust - 1].Name}}

-1 because "Customer" starts at 1 and not 0

and you will get the nth index inside cust_info, where the nth index was selected by the user and stored into defcust.

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

edited Apr 12, 2016 at 17:43

answered Apr 11, 2016 at 23:25

theblindprophet

7,9577 gold badges44 silver badges60 bronze badges

1 Comment

jenryb Over a year ago

The other user is right, if it is by index it needs a -1. What if I don't want to select by the index but rather the option chosen? Such as here: plnkr.co/edit/8rfBM4Lz8C1jSQCoPAmL?p=preview

J Kiran · Accepted Answer · 2016-04-12 22:38:01Z

0

Without using the index to achieve this needs a little more javascript in there I guess.. I've added some. Hope this helps.. See this demo

<select ng-model="defcom" ng-change="change_acc(defcom)"
    ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >
  </select>
  <select ng-model="defcust" ng-change="change_cust(defcust)"
    ng-options="opt.Customer as opt.Customer for opt in cust_info | filter: {Com: defcom}: true">
  </select>

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

answered Apr 12, 2016 at 22:38

J Kiran

1

1 Comment

jenryb Over a year ago

I managed to do it without using the index, but then I lost the default: stackoverflow.com/questions/36583813/…

Collectives™ on Stack Overflow

Data binding with ng-option dropdown in Angular

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related