ng-selected不更新下拉列表角度
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ng-selected不更新下拉列表角度相关的知识,希望对你有一定的参考价值。
我一直在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元素的第一个子元素。我做错了什么?有人可以帮忙吗?
答案
你可以使用ng-options
选择而不是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>
另一答案
这是因为你的ngModel
上的初始绑定select
未定义。
ng-model="connectTVs.index
$ scope.connectTVs不存在!
适合您的问题的最快解决方案是添加:
$scope.connectTVs = {
index: 0,
$ scope.onChangeMethod = function(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不更新下拉列表角度的主要内容,如果未能解决你的问题,请参考以下文章