ng-selected 不更新下拉列表 angularjs

Question

我一直在 AngularJS 工作，在执行以下功能时，作为 select 元素的第一个子元素，我仍然得到一个空选项。

这是我的HTML代码片段

<select id="connectTV" aria-label="How many Dish TVs" ng-model="connectTVs.index" ng-change="onChangeMethod(connectTVs.index)" class="selector" aria-required="true">
           <option  ng-repeat="noOfTV in noOfTVs" ng-value="noOfTV.index" ng-selected="noOfTV.index == connectTVs.index">{{noOfTV.value}}</option>
</select>

JS代码

$scope.noOfTVs = [
                      {index: 0, value: 'How many Dish TVs?'},
                      {index: 1, value: 'Connect 1 Dish TV'},
                      {index: 2, value: 'Connect 2 Dish TVs'},
                      {index: 3, value: 'Connect 3 Dish TVs'},
                      {index: 4, value: 'Connect 4 Dish TVs'},
                      {index: 5, value: 'Connect 5 Dish TVs'},
                      {index: 6, value: 'Connect 6 Dish TVs'},
                      {index: 7, value: 'Connect 7 Dish TVs'},
                      {index: 8, value: 'Connect 8 Dish TVs'}
                      ];


$scope.onChangeMethod = function(connectTVsIndex) { 

    // Doing some actions
     $scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
     $window.sessionStorage.setItem("noOfTVSelected", $scope.connectTVs.index);
}

最后，生成的 HTML 具有

<option value="? number:4 ?"></option>

获取空选项作为 select 元素的第一个子元素。我哪里做错了？有人可以帮忙吗？

Answer 1

您可以将 ng-options 用于 select 而不是 ng-repeat。前者 performance 适用于更大的数组集并提供更大的灵活性。

var app = angular.module('myApp', [])
app.controller('myCtrl', [
    '$scope',
    function($scope) {
        $scope.noOfTVs = [{
            index: 0,
            value: 'How many Dish TVs?'
        }, {
            index: 1,
            value: 'Connect 1 Dish TV'
        }, {
            index: 2,
            value: 'Connect 2 Dish TVs'
        }, {
            index: 3,
            value: 'Connect 3 Dish TVs'
        }, {
            index: 4,
            value: 'Connect 4 Dish TVs'
        }, {
            index: 5,
            value: 'Connect 5 Dish TVs'
        }, {
            index: 6,
            value: 'Connect 6 Dish TVs'
        }, {
            index: 7,
            value: 'Connect 7 Dish TVs'
        }, {
            index: 8,
            value: 'Connect 8 Dish TVs'
        }];
        $scope.connectTVs=$scope.noOfTVs[0];
        $scope.onChangeMethod = function() {
            // Doing some actions
            console.log($scope.connectTVs)
        }

    }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <select id="connectTV" aria-label="How many Dish TVs" ng-model="connectTVs" ng-change="onChangeMethod()" class="selector" aria-required="true" ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs">
</select>
    </div>
</div>

Answer 2

发生这种情况是因为您 select 上的初始绑定 ngModel 未定义。

ng-model="connectTVs.index $scope.connectTVs 不存在！

适合您的问题的最快解决方案是添加：

$scope.connectTVs = {
    index: 0,

$scope.onChangeMethod = 函数（connectTVsIndex）{

// Doing some actions
 $scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
 $window.sessionStorage.setItem("noOfTVSelected", $scope.connectTVs.index);

} 最后，这是生成的 HTML，它具有

在此处输入图片描述

获取空选项作为 select 元素的第一个子元素。我哪里做错了？有人可以帮忙吗？

    value: 'How many Dish TVs?'
}

但我要补充一点，在这种对象中添加索引属性是没有用的，因为您可以在视图中使用 $index.

访问它

工作演示：https://plnkr.co/edit/mmD4mVUNxLr9sbojrCKc?p=preview

ng-selected 不更新下拉列表 angularjs

ng-selected not updating the dropdown angularjs

html

javascript

angularjs

angularjs-ng-repeat