不能在AngularJS中使用ng-model和ng-repeat或ng-select在下拉菜单中选择默认值

Cannot select default value in dropdown using ng-model and ng-repeat or ng-select in AngularJS

本文关键字：ng-select 下拉菜单 选择 ng-repeat 默认值 ng-model AngularJS 不能      更新时间：2023-09-26

我对AngularJS真的很陌生，我非常喜欢它。但是我遇到了一个问题，试图初始化一个特定值的预加载下拉菜单。

下拉菜单是用JSON数组中可用的值初始化的，但是当我尝试在这个下拉菜单中选择一个默认值时，我没有看到选择的值，但是ng-model变量设置正确。

我在这里创建了一个柱塞的例子http://plnkr.co/edit/7su3Etr1JNYEz324CMy7?p=preview试图实现我想要的，但我不能让它工作。我试过用n -repeat和n -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;
            }
        });
}

任何帮助将不胜感激!

提前感谢。

您至少可以使用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

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

设置如下，它将工作

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

详细阅读这里的答案ng-selected不能与ng-repeat一起设置默认值

相关文章：