Angular ng-options object linked to ng-repeat object

Question

I have a problem with angular, using ng-options on a select tag, where the default selected element should be determined by a property in "company" from the ng-repeat element. Look at this code:

<tr data-ng-repeat="company in companies">
   <td><input data-ng-model="company.Name" value="{{company.Name}}" /></td>
   <td>
     <select data-ng-model="selectedSeller" data-ng-options="seller.Login for seller in sellers">
     </select>
  </td>
</tr>

I can set a default element on all elements by $scope.selectedSeller = $scope.companies[0] in the controller scope, but what I really want, is to set selected to whoever is responsible for the company by linking the seller object to the company object. I need someway to implement "isSelected" from the code below.

<tr data-ng-repeat="company in companies">
   <td><input data-ng-model="company.Name" value="{{company.Name}}" /></td>
   <td>
     <select data-ng-model="selectedSeller" isSelected="company.responsible == seller.id" data-ng-options="seller.Login for seller in sellers">
     </select>
   </td>
</tr>

Anyone know how to solve this?

Víťa Plšek - angular.cz · Accepted Answer · 2015-10-30 11:05:05Z

1

Angular is data driven, so you specify just model and ng-model connects it to the inputs.

So you provide just ng-model, no value and no "isSelected"

Look at this example: http://jsbin.com/kiqazaxahe/edit?html,js,output

<table>
  <tr ng-repeat="company in vm.companies">
   <td><input data-ng-model="company.
     name"/></td>
   <td>
     <select data-ng-model="company.responsible" 
             data-ng-options="seller.id as seller.login for seller in vm.sellers">
     </select>
   </td>
</tr>
  </table>

  <h2>Json vm.companies</h2>
  <pre>{{vm.companies | json}}</pre>

And your data probably look like this:

var StackController = function() {
  this.companies = [
    {
      name: 'company 1',
      responsible : 1
    },
     {
      name: 'company 2',
      responsible : 2
    },
     {
      name: 'company 3',
    }
  ];

  this.sellers = [
    {
      login : 'pavel',
      id : 1,
    },
    {
      login : 'petr',
      id : 2,
    },
    {
      login : 'igor',
      id : 3,
    }
  ];
};

angular.module('stackApp', [])
  .controller('StackController', StackController);

Model of select is company.seller which is connected to seller.id, syntax of ng-options can determine what is used as identifier and what is label.

seller.id as seller.login for seller in vm.sellers

One more thing to add, identifier could be not just id but whole object.

answered Oct 30, 2015 at 11:05

Víťa Plšek - angular.cz

1,5031 gold badge10 silver badges26 bronze badges

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

4 Comments

Víťa Plšek - angular.cz Over a year ago

You welcome, I would appreciate also +1 and check as correct :)

Víťa Plšek - angular.cz Over a year ago

Almost :) +1 Is the arrow up. But the main thing is that your are satisfied :)

Andreas Skagestad Over a year ago

Not enough reputation to press this button :( Need two more points it seems 13/15

Víťa Plšek - angular.cz Over a year ago

It doesn't matter, just enjoy stackoverflow :)

Emir Marques · Accepted Answer · 2015-10-30 11:45:18Z

0

Use the filter as:

<select data-ng-model="selectedSeller" data-ng-options="seller.Login for seller in sellers" ng-init="selectedSeller = $filter('filter')($scope.company, {responsible: seller.id})[0]">
     </select>

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

app.controller('StackController', function($scope) {
    $scope.companies = [
        {
            name: 'company 1',
            responsible : 1
        },
        {
            name: 'company 2',
            responsible : 2
        },
        {
            name: 'company 3',
        }
    ];
    
    $scope.sellers = [
        {
            login : 'pavel',
            id : 1,
        },
        {
            login : 'petr',
            id : 2,
        },
        {
            login : 'igor',
            id : 3,
        }
    ];
}).filter("filterSeller", function() {
	return function(sellers, company) {
        var seller = {};
   
		angular.forEach(sellers, function(item, j) {
            if(company.responsible == item.id){
                seller = item;
                return false;
            }
        });
     
        return seller.id;
	};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app="stackApp" ng-controller="StackController">
    <tr ng-repeat="company in companies">
        <td><input ng-model="company.name"/></td>
        <td>
            <select ng-model="company.responsibleSelected" ng-options="seller.id as seller.login for seller in sellers" 
            ng-init="company.responsibleSelected = (sellers | filterSeller:company)">
            </select>
        </td>
      <td>{{company.responsibleSelected}}</td>
    </tr>
</table>

edited Oct 30, 2015 at 11:45

answered Oct 30, 2015 at 11:05

Emir Marques

2,6772 gold badges18 silver badges22 bronze badges

2 Comments

Víťa Plšek - angular.cz Over a year ago

This is wrong, selectedSeller is same for every item in iteration. select has to be connected to the attribute of company. if you want to set default, just set it to the model.

Víťa Plšek - angular.cz Over a year ago

Edited? You have almost stollen my code :) Still your code is quite dirty. You do not need to iterate thru list for determaning if it is selected and definitly default value shouldn't be done this way. Setting the model does exactly the same and is way more clean.

Collectives™ on Stack Overflow

Angular ng-options object linked to ng-repeat object

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related