CODEWITHSUNDEEP
javascriptangularjs
user4217999
user4217999

Reputation:

How to combine multiple object properties in select ng-options angular

I want to display both the text and number in my select options. JSON has different properties for text and number and I need to combine them and display in select options value by default.

Expected Output: 000.000.0001 - Chicago

HTML:

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">  
  <select ng-model="model.selected" ng-options="item.ID as item.Title for item in items"></select>
  <p>Selected: {{model.selected}}</p>  
</body>
</html>

JS:

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

app.controller('MainCtrl', function($scope) {
  $scope.items = [
       {ID: '000.000.0001', Title: 'Chicago'},
       {ID: '000.000.0002', Title: 'New York'},
       {ID: '000.000.0003', Title: 'Washington'}
    ];  
});

Upvotes: 1

Views: 3017

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41407

you can assign multiple values using this approach 

  <select ng-model="model.selected" ng-options="item.ID  as item.ID + '-' + item.Title for item in items"></select>
  <p>Selected: {{model.selected}}</p> 


angular.module("app",[])
.controller("ctrl",function($scope){

  $scope.model = {
    selected : '000.000.0001'
  }
	$scope.items = [
       {ID: '000.000.0001', Title: 'Chicago'},
       {ID: '000.000.0002', Title: 'New York'},
       {ID: '000.000.0003', Title: 'Washington'}
    ];  
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="model.selected" ng-options="item.ID  as item.ID + '-' + item.Title for item in items"></select>
  <p>Selected: {{model.selected}}</p>  
</div>

Upvotes: 4

Related Questions