Question

我是AngularJS的新手，我非常喜欢它。但是我在尝试使用特定值初始化预先下载的下拉列表时遇到了问题。

使用JSON数组中的值初始化下拉列表，但是当我尝试在此下拉列表中选择默认值时，我没有看到选择了该值但是ng-model变量设置正确。

我在这里创建了一个plunker示例http://plnkr.co/edit/7su3Etr1JNYEz324CMy7?p=preview尝试实现我想要的，但我无法让它工作。我试过ng-repeat和ng-select，没有运气。我做的另一个尝试（在这个例子中）试图设置ng-selected属性。

这是我html的一部分

<body ng-controller="MySampleController">
  <select name="repeatSelect" id="repeatSelect" ng-model="SelectedStatus" ng-init="SelectedStatus">
    <option ng-repeat="option in StatusList[0]" value="{{option.key}}" ng-selected="{{option.key==SelectedStatus}}">{{option.name}}</option>
  </select>

  <select name="repeatSelect" id="repeatSelect" ng-model="SelectedOrigin">
    <option ng-repeat="option in OriginList[0]" value="{{option.key}}" ng-selected="{{option.key == SelectedOrigin}}">{{option.key}} - {{option.name}}</option>
  </select>

  <pre>Selected Value For Status: {{SelectedStatus}}</pre>
  <pre>{{StatusList[0]}}</pre>
  <pre>Selected Value For Origin: {{SelectedOrigin}}</pre>
  <pre>{{OriginList[0]}}</pre>
</body>

这是我控制器的代码

function MySampleController($scope) {

        $scope.StatusList = [];
    $scope.OriginList = [];    
    $scope.ServiceCall = {};
    $scope.EntityList = [];

    $scope.SelectedStatus = -3;
    $scope.SelectedOrigin = 1;

        var myList = [
            {
                item: 'Status',
                values: [{ key: -3, name: 'Aperto' },
                         { key: -1, name: 'Chiuso' }]
            },
            {
                item: 'Origin',
                values: [{ key: 1, name: 'Origin1' },
                            { key: 2, name: 'Origin2' },
                            { key: 3, name: 'Origin3' }]
            }
        ];

      $scope.documentsData = myList;
      angular.forEach($scope.documentsData, function (value) {
            $scope.EntityList.push(value);
            switch ($scope.EntityList[0].item) {
                case 'Status':
                    $scope.StatusList.push($scope.EntityList[0].values);                    
                    $scope.EntityList = [];
                    break;
                case 'Origin':
                    $scope.OriginList.push($scope.EntityList[0].values);
                    $scope.EntityList = [];
                    break;
            }

        });
}

任何帮助将不胜感激！

提前致谢。

Answer 1

您至少可以使用ng-options代替ng-repeat + option，在这种情况下默认值可以正常使用。

<select name="repeatSelect" id="repeatSelect"
        ng-options="opt.key as opt.key+'-'+opt.name for opt in StatusList[0]"
        ng-model="SelectedStatus"></select>`

通过将选项标签指定为范围函数，您还可以使其更具可读性。

HTML：ng-options="opt.key as getOptionLabel(opt) for opt in StatusList[0]"

控制器：

$scope.getOptionLabel = function(option) {
  return option.key + " - " + option.name;
}

Plunker：http://plnkr.co/edit/7BcAuzX5JV7lCQh772oo?p=preview

Answer 2

没有ngOptions的select指令的值总是一个字符串。

设置如下，它可以正常工作

$scope.SelectedStatus = '-3';
$scope.SelectedOrigin = '1';

在此详细阅读答案ng-selected does not work with ng-repeat to set default value

无法在AngularJS中使用ng-model和ng-repeat或ng-select选择下拉列表中的默认值

2 个答案: