下拉列表不会根据范围值angularjs进行更新
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉列表不会根据范围值angularjs进行更新相关的知识，希望对你有一定的参考价值。
过去几天我一直在研究一些功能。
每当我选择下拉列表时，都需要捕获索引值。同时，当我点击删除按钮时，应删除一台电视，并在下拉列表中更新剩余的电视。
但问题是当删除选定的电视时，索引值会更新，但ng model（下拉列表）不会使用connectTVs.index值更新。我失踪的地方？
这是代码片段。
// Code goes here
var app = angular.module('myApp', []);
app.controller('myCtrl', 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(connectTVsIndex) {
// Doing some actions
$scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
alert($scope.connectTVs.index);
}
$scope.removetv = function(connectTVsIndex) {
$scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
$scope.connectTVs.index = $scope.connectTVs.index - 1;
alert($scope.connectTVs.index);
}
});<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.6.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<h3>Demo App</h3>
<div ng-controller="myCtrl">
<select id="connectTV" aria-label="How many Dish TVs"
ng-model="connectTVs"
ng-change="onChangeMethod(connectTVs.index)"
class="selector" aria-required="true"
ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs">
</select>
<br><br>
<div>
<button ng-click="removetv(connectTVs.index)">Remove TV </button>
</div>
</div>
</body>
</html>答案
var app = angular.module('myApp', []);
app.controller('myCtrl', 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.connectTVs['val'] = $scope.noOfTVs[0];
$scope.onChangeMethod = function(connectTVsIndex) {
// Doing some actions
$scope.connectTVs['val'] = $scope.noOfTVs[connectTVsIndex];
alert($scope.connectTVs['val'].index);
}
$scope.removetv = function(connectTVsIndex) {
alert($scope.connectTVs['val'].index);
console.log(connectTVsIndex)
$scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
$scope.connectTVs.index = $scope.connectTVs.index - 1;
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-controller="myCtrl">
<select id="connectTV" aria-label="How many Dish TVs" ng-model="connectTVs['val']" ng-change="onChangeMethod(connectTVs['val'].index)" class="selector" aria-required="true" ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs">
</select>
<br><br>
<div>
<button ng-click="removetv(connectTVs['val'].index)">Remove TV </button>
</div>
</div>
</body>另一答案
您的解决方案不需要更改其索引（甚至保留它）。只需使用.splice()弹出数组，并使用$index或.indexOf()提供索引。这是一个演示：
var app = angular.module('myApp', []);
app.controller('myCtrl', 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(index){
/* can be like:
$scope.noOfTVs[index].index = index;
*/
}
$scope.removetv = function(value) {
var index = $scope.noOfTVs.indexOf(value);
$scope.noOfTVs.splice(index, 1)
$scope.connectTVs = $scope.noOfTVs[index - 1] || $scope.noOfTVs[index] || null;
}
});<script data-require="angular.js@*" data-semver="1.6.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h3>Demo App</h3>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="connectTVs" ng-change="onChangeMethod($index)" class="selector" aria-required="true" ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs">
</select>
<br><br>
<div>
<button ng-click="removetv(connectTVs)">Remove TV</button>
</div>
</div>另一答案
您在removetv（）方法中分配ng-model后正在更新索引。而且，您在此方法中更新了索引变量。试试这个。
// Code goes here
var app = angular.module('myApp', []);
app.controller('myCtrl', 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(connectTVsIndex) {
// Doing some actions
$scope.connectTVs = $scope.noOfTVs[connectTVsIndex];
alert($scope.connectTVs.index);
}
$scope.removetv = function(connectTVsIndex) {
$scope.connectTVs.index = $scope.connectTVs.index - 1;
alert($scope.connectTVs.index);
$scope.connectTVs = $scope.noOfTVs[$scope.connectTVs.index];
}
});<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.6.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<h3>Demo App</h3>
<div ng-controller="myCtrl">
<select id="connectTV" aria-label="How many Dish TVs" ng-model="connectTVs" ng-change="onChangeMethod(connectTVs.index)" class="selector" aria-required="true" ng-options="noOfTV as noOfTV.value for noOfTV in noOfTVs">
</select>
<br><br>
<div>
<button ng-click="removetv(connectTVs.index)">Remove TV </button>
</div>
</div>
</body>
</html>以上是关于下拉列表不会根据范围值angularjs进行更新的主要内容，如果未能解决你的问题，请参考以下文章