CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangularjs-select
Sanjay B
Sanjay B

Reputation: 211

Default value in angular js select from Server

Here is the Scenario

I am getting Data from server in this form

$scope.data=[
{"name":"xyz","status":"pending"},
{"name":"abc","status":"completed"},
{"name":"pqr","status":"completed"}
]

This Data is Seprate GET call for different status

$scope.statusValues=[
{"statusName":"pending","id":"1"},
{"statusName":"completed","id":"2"},
{"statusName":"cancelled","id":"3"},
{"statusName":"custom","id":"4"}
]

In HTML:-

<div ng-repeat="t in data">{{t.name}}</div>

How to Display t.status value inside Select method with more $scope.statusValues

enter image description here

Upvotes: 0

Views: 85

Answers (2)

Weedoze
Weedoze

Reputation: 13953

You can use ng-options to display all the status and ng-model to bind to your data status

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.data = [{
    "name": "ABC",
    "statusId": "1",
    "status": "completed"
  }, {
    "name": "XYZ",
    "statusId": "2",
    "status": "pending"
  }, {
    "name": "PQR",
    "statusId": "3",
    "status": "assigned"
  }];

  $scope.statusValues = [{
    "statusId": "1",
    "status": "completed"
  }, {
    "statusId": "2",
    "status": "pending"
  }, {
    "statusId": "3",
    "status": "assigned"
  }, {
    "statusId": "4",
    "status": "cancelled"
  }, {
    "statusId": "5",
    "status": "customstatus"
  }, {
    "statusId": "6",
    "status": "customstatus2"
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="t in data">
    {{t.name}}
    <select ng-model="t.status" ng-options="s.status as s.status for s in statusValues"></select>
  </div>
</div>

EDIT

Update arrays as discussed in comments

Upvotes: 1

Amee Prajapati
Amee Prajapati

Reputation: 696

Use key value pair for combine them.

I have created plunker it may helpful.

Plunker

Upvotes: 1

Related Questions