Question

我有这样的数据结构：

$scope.personalityFields.traveller_type = [
  {"id":1,"value":"Rude", "color":"red"},
  {"id":2,"value":"Cordial", "color":"yellow"},
  {"id":3,"value":"Very Friendly", "color":"green"},
];

一个看起来像这样的选择框：

<select map-value name="traveller_type" ng-init="init_select()" class="full-width" ng-model="traveller_type" ng-options="item as item.value for item in personalityFields.traveller_type">
  <option value="" disabled selected> Choose ...</option>
</select>

如何根据映射到附加JSON中“value”字段的响应将选择框的值设置为值？请帮忙！

因此，如果在响应中，traveller_type是字段设置为“粗鲁”，我希望在选择框中设置“粗鲁”的值。这就是响应的样子：

someObject = {
    traveller_type: "Rude"
}

这需要显示在选择框

上

Answer 1

如果您只有value（＆＃34; Rude＆＃34;，＆＃34; Cordial＆＃34;＆＃34;友情＆＃34;）从回复中回来，您必须更改{{ 1}}语法为ngOptions（将 item.value 绑定到选项）

＆＃13;

ng-options="item.vaue as item.value for item in personalityFields.traveller_type"

＆＃13;

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.traveller_type = 'Rude';
    $scope.personalityFields = {
      "traveller_type": [{
          "id": 1,
          "value": "Rude",
          "color": "red"
        },
        {
          "id": 2,
          "value": "Cordial",
          "color": "yellow"
        },
        {
          "id": 3,
          "value": "Very Friendly",
          "color": "green"
        },
      ]
    };
  })

＆＃13;

否则，您有完整的对象（<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> <select map-value name="traveller_type" class="full-width" ng-model="traveller_type" ng-options=" item.vaue as item.value for item in personalityFields.traveller_type"> <option value="" disabled selected> Choose ...</option> </select> {{traveller_type}} </div>）从响应返回，您必须将{"id":1,"value":"Rude", "color":"red"}语法更改为ngOptions（使用 track by 仅比较ng-options="item as item.value for item in personalityFields.traveller_type track by item.value"财产）

＆＃13;

value

＆＃13;

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.traveller_type = {
          "id": 1,
          "value": "Rude",
          "color": "red"
        };
    $scope.personalityFields = {
      "traveller_type": [{
          "id": 1,
          "value": "Rude",
          "color": "red"
        },
        {
          "id": 2,
          "value": "Cordial",
          "color": "yellow"
        },
        {
          "id": 3,
          "value": "Very Friendly",
          "color": "green"
        },
      ]
    };
  })

＆＃13;

Answer 2

您的代码存在一些问题，下面是您可以实现目标的示例：

angular.module('limitToExample', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.serverResponse = {
          "id": 1,
          "value": "Rude",
          "color": "red"
        };
        $scope.personalityFields = {

          traveller_type: [{
            "id": 1,
            "value": "Rude",
            "color": "red"
          }, {
            "id": 2,
            "value": "Cordial",
            "color": "yellow"
          }, {
            "id": 3,
            "value": "Very Friendly",
            "color": "green"
          }],
        }

      }]);

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example103-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>



</head>

<body ng-app="limitToExample">
  
  <div ng-controller="ExampleController">
    <select map-value name="traveller_type" class="full-width" ng-model="serverResponse" ng-options="item as item.value for item in personalityFields.traveller_type track by item.value">

</select>

  </div>
</body>

</html>

这是设置默认值的一种方式，您可以根据服务器的响应使其动态显示（猜猜这是您想要的吗？）

我只是在复制@Pengyy在答案中所描述的内容，所以请随意接受他的意见。

未设置选择框的默认值

2 个答案: