javascript - 用对象数据源填充选择

Question

控制器：

$scope.obj = {
    "category": {
        "value": "1",
        "synonym": ""
    },
    "name": {
        "value": "2",
        "synonym": ""
    }
};

我有这样的html：

<select
     ng-model="model",
     ng-options="value.value as key for (key , value) in obj",
     bs-select>
</select>

我想得到这个结果：

<option value="1"> category </option>
<option value="2"> name </option>

但我明白了：

<option value="category"> category </option>
<option value="name"> name </option>

你能帮我找出问题吗？

Answer 1

你在做什么是正确的。下拉列表有点混乱，因为您应该通过从模型而不是从 DOM 访问来获取值。所以无论用 HTML 渲染什么都无关紧要。

这是一个示例（FIDDLE），当您更改下拉列表时，将传入实际值。虽然在呈现的 HTML 中看起来有点不同，但这就是 Angularjs 的本质，它是 2-way 的自包含范围数据绑定。

function ctrl($scope) {
    $scope.obj = {
        "category": {
            "value": "1",
            "synonym": ""
        },
        "name": {
            "value": "2",
            "synonym": ""
        }
    };

    $scope.model = "1";

    $scope.$watch('model', function(newValue, oldValue){
        console.log(newValue);
    });
}