Question

我可以使用以下语法成功地将数组绑定到角度的选择标记： -

var mainApp = angular.module('mainApp', []);

mainApp.controller('mainController', [
'$scope',
function ($scope) {

    $scope.testArray = [{ text: '1st', value: 1 }, { text: '2nd', value: 2 }];

}]);

我的HTML是这样的： -

<select ng-model="testModel" ng-options="theTitle.text as theTitle.text for theTitle in testArray"></select>

然而，这会创建一个如下选项列表： -

<select ng-options="theTitle.text as theTitle.text for theTitle in testArray" ng-model="testModel" class="ng-pristine ng-valid">
  <option value="?"></option>
  <option value="0">1st</option>
  <option value="1">2nd</option>
</select>

如何将数组中的value属性绑定到选项值属性，为什么它将第一个选项显示为？

我还需要在ng-options属性中加入其他内容吗？

Answer 1

原因是什么？显示是因为您的ngModel尚未初始化。在mainController中，将testModel初始化为'1st'。你会看到的吗？消失，你的下拉列表初始化为你的第一个项目

Answer 2

在ng-options中，格式为value as alias，因此您需要：

<select ng-model="testModel" ng-options="theTitle.value as theTitle.text for theTitle in testArray"></select>

创建?选项是因为您的模型值不作为选项中的选项存在，因此浏览器将其添加为将输入显示为空。要修复它，您需要将模型初始化为有效值，例如：ng-init="testModel = testArray[0].value"

Answer 3

在html部分：

<select ng-model="testModel" ng-options="theTitle.text for theTitle in testArray"></select>

在javascript部分

var mainApp = angular.module('mainApp', []);
    mainApp.controller('mainController', [
    '$scope',
    function ($scope) {

        $scope.testArray = [{ text: '1st', value: 1 }, { text: '2nd', value: 2 }];
        $scope.testModel = $scope.testArray[0];
    }]);

如何在使用angular时设置select的value属性

3 个答案: