javascript - angular js中的默认值从服务器中选择

Question

这是场景

我以这种形式从服务器获取数据

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

此数据是针对不同状态的单独 GET 调用

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

在 HTML 中：-

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

如何使用更多 $scope.statusValues 在 Select 方法中显示 t.status 值

Answer 1

使用键值对组合它们。

I have created plunker it may helpful.

普朗克

Answer 2

您可以使用ng-options显示所有状态并ng-model绑定到您的数据状态

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>

编辑

如评论中所述更新数组