ng-options 仅适用于名称，不适用于值

Question

我在这里看到了几个类似的问题。事实上，这就是我走到这一步的方式。但是一小块不起作用。我有以下内容：

<select id="facility" class="form-control"
        ng-model="MainObj.facility" name="facility"
        ng-options="fclty.value as fclty.name for fclty in MainData.fclts"> 
    <option value=""></option>
</select>

我已经通过日志检查 MainData.fclts 包含我想要的内容，但每个选项输出为

<option value="0" label="Actual Facility Name">Actual Facility Name</option>
<option value="1" label="Actual Facility Name">Actual Facility Name</option>
(etc)

换句话说，它正确地将 name 放在那里，但只是使用 0, 1, 2, ... 作为值而不是值字段中的内容。

我在这里错过了什么？

谢谢。

编辑：示例数据：

[value: '00001', name: "John's House"]
[value: '00002', name: "School"]
[value: 'testval', name: "Testing Building"]

（等等）

编辑 2：

只是为了好玩，我把两者交换了 fclty.name as fclty.value。果然 value 出现在下拉列表中，但 option 的值部分仍然是默认值 0, 1, 2, .. 因此，如果需要，它可以看到该字段，但出于某种原因，不想使用它来填充 option.

的值

Answer 1

您的 MainObj 和 MainData 是什么样子的？这个例子完全按照它应该的方式工作：

angular.module("myApp",[])
.controller("main",["$scope", function($scope){
    $scope.MainData = {
        fclts: [
          {name:"Place", value: "00001"},
          {name:"Other Place", value: "00002"},
          {name:"Thrid Place", value: "testval"}
        ]
    };
    $scope.MainObj = {facility: "00002"};
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp" ng-controller="main">
    <select ng-model="MainObj.facility" name="facility" ng-options="fclty.value as fclty.name for fclty in MainData.fclts"> 
    </select>
    {{MainObj.facility}}
</body>

您的示例数据语法无效，请确认它们的格式类似于对象：

[
  {value: "00001", name: "John's House"},
  {value: "00002", name: "School"},
  {name:"Thrid Place", value: "testval"}
]

Answer 2

使用 AngularJS V1.3，ng-options 指令将值设置为选项的 $index。

<option value="" class=""></option>
<option value="0" label="John's House">John's House</option>
<option value="1" label="School">School</option>
<option value="2" label="Testing Building">Testing Building</option>

对于 AngularJS V1.4， ng-options 指令设置不同的值：

<option value="" class=""></option>
<option label="John's House" value="string:00001">John's House</option>
<option label="School" value="string:00002">School</option>
<option label="Testing Building" value="string:testval">Testing Building</option>

在 V1.3 和 V1.4 之间，ng-options 指令进行了重大重构。

来自文档：

ngOptions

The ngOptions directive has also been refactored and as a result some long-standing bugs have been fixed. The breaking changes are comparatively minor and should not affect most applications.

Due to 7fda214c, when ngOptions renders the option values within the DOM, the resulting HTML code is different. Normally this should not affect your application at all, however, if your code relies on inspecting the value property of <option> elements (that ngOptions generates) then be sure to read the details.

Due to 7fda214c, when iterating over an object's properties using the (key, value) in obj syntax the order of the elements used to be sorted alphabetically. This was an artificial attempt to create a deterministic ordering since browsers don't guarantee the order. But in practice this is not what people want and so this change iterates over properties in the order they are returned by Object.keys(obj), which is almost always the order in which the properties were defined.

Also due to 7fda214c, setting the ngOptions attribute expression after the element is compiled, will no longer trigger the ngOptions behavior. This worked previously because the ngOptions logic was part of the <select> directive, while it is now implemented in the ngOptions directive itself.

— AngularJS Developer Guide - Migrating from V1.3 to V1.4 - ngOptions

ng-options 仅适用于名称，不适用于值

ng-options is only working for name, not value

angularjs

ng-options

ngOptions