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

Question

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

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

我在这里http://plnkr.co/edit/7su3Etr1JNYEz324CMy7?p=preview tryng创建了一个punker示例，以实现我想要的功能，但我无法使其正常工作。 我尝试了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;
}

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

Answer 2

不带ngOptions使用的select指令的值始终是字符串。

设置如下，它将起作用

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

在此处详细阅读答案ng-selected不适用于ng-repeat设置默认值

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

问题描述

2 个解决方案

解决方案1
0 2016-08-18 14:07:18

解决方案2
0 2016-08-18 14:29:07

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

问题描述

2 个解决方案

解决方案1 0 2016-08-18 14:07:18

解决方案2 0 2016-08-18 14:29:07

解决方案1
0 2016-08-18 14:07:18

解决方案2
0 2016-08-18 14:29:07