从下拉列表中选择时，Angular JS ng-model变为空 [英] Angular JS ng-model is becoming null on selecting from drop down list
问题描述
我是角js的新手。我正在创建一些应用程序，我从下拉列表中选择一个值，并且所选值与ng-model相关联。但我发现ng-model实际上变成了null而不是获取值。
我的整个代码是：
I am a novice in angular js. I am creating some application where i am selecting a value from drop down list and the selected value is associated with ng-model. But i see that the ng-model is actually becoming null instead of gettting a value. My whole code is:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="MyCtrl">
<h2>Select one Item from left and one Item from right</h2>
<select ng-model="leftmodel"
ng-change="ChangeOptions()"
ng-options="option as option.value disable
when option.disabled for option in left">
</select>
<select ng-model="rightmodel"
ng-change="ChangeOptions()"
ng-options="option as option.value disable when option.disabled for option in right">
</select>
</div>
</div>
<script>
var module = angular.module("app", []);
module.controller("MyCtrl",
function($scope) {
$scope.left = [{
"name": "apple",
"value": "Nice Apple",
"disabled": false
}, {
"name": "orange",
"value": "Yellow Orange",
"disabled": true
}, {
"name": "berry",
"value": "Blue Berry",
"disabled": false
}];
$scope.right = [{
"name": "apple",
"value": "Nice Apple",
"disabled": true
}, {
"name": "orange",
"value": "Yellow Orange",
"disabled": false
}, {
"name": "berry",
"value": "Blue Berry",
"disabled": false
}];
$scope.leftmodel = $scope.left[0];
$scope.rightmodel = $scope.right[1];
$scope.ChangeOptions = function() {
var size = $scope.left.length;
console.log(size);
console.log($scope.leftmodel);
console.log($scope.rightmodel);
for (var i = 0; i < size; i++) {
if ($scope.left[i].name === $scope.rightmodel.name) {
$scope.right[i].disabled = true;
} else {
$scope.right[i].disabled = false;
}
}
for (var i = 0; i < size; i++) {
if ($scope.right[i].name === $scope.leftmodel.name) {
$scope.left[i].disabled = true;
} else {
$scope.left[i].disabled = false;
}
}
};
}
);
</script>
</body>
</html>
我还有 Codpen
在控制台中我收到以下错误：
I also have a Codpen In console i get the following errors:
3对象{$$ hashKey：object：5，disabled：false，name：
berry，value：Blue Berry} Object {$$ hashKey：object：7，
disabled：false，name：orange，value：Yellow Orange} 3 null
Object {$$ hashKey：object：7，disabled：true，name：orange，
value：Yellow Orange}TypeError：无法在ChildScope中读取
null
的属性'name'。$ scope.ChangeOptions（pen.js：87：58）
at fn（eval）在编译时（ https：// cdnjs .cloudflare.com / ajax / libs / angular.js / 1.6.1 / angular.js:15156:15 ），
：4：159）
在ChildScope。$ eval（< a href =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1 .6.1 / angular.js：17972：28rel =nofollow noreferrer> https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:17972:28 ）
https ：//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js：25711：13
at Object。 （ https://cdnjs.cloudflare .com / ajax / libs / angular.js / 1.6.1 / angular.js：28536：9 ）
atEach（ https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular。 js：357：20 ）
at Object。$$ writeModelToScope（ https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28534:5 ）
at writeToModelIfNeeded（ https：// cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28527:14 ）
https：// c dnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28521:9 验证完成时
（ https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/ angular.js：28446：9 ）
3 null nullTypeError：无法在ChildScope中读取null
的属性'name'。$ scope.ChangeOptions（pen.js：79：58 ）$ f $ b at fn（eval at compile（ https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:15156:15 ），
：4：159）$ b $ 2在ChildScope。$ eval（ https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:17972:28 ）
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:25711:13
at Object。 （ https://cdnjs.cloudflare .com / ajax / libs / angular.js / 1.6.1 / angular.js：28536：9 ）
atEach（ https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular。 js：357：20 ）
at Object。$$ writeModelToScope（ https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28534:5 ）
at writeToModelIfNeeded（ https：// cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28527:14 ）
https：// c dnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28521:9 验证完成时
（ https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/ angular.js：28446：9 ）
有谁知道为什么会这样。我想要做的是从左下拉菜单中选择一个值，不允许用户从其他下拉列表中选择相同的值。这意味着如果用户从左侧选择框中选择一些值，他将无法从右侧选择框中选择该值，反之亦然。
3 Object { $$hashKey: "object:5", disabled: false, name: "berry", value: "Blue Berry" } Object { $$hashKey: "object:7",
disabled: false, name: "orange", value: "Yellow Orange" } 3 null Object { $$hashKey: "object:7", disabled: true, name: "orange", value: "Yellow Orange" } "TypeError: Cannot read property 'name' of null at ChildScope.$scope.ChangeOptions (pen.js:87:58) at fn (eval at compile (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:15156:15), :4:159) at ChildScope.$eval (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:17972:28) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:25711:13 at Object. (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28536:9) at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:357:20) at Object.$$writeModelToScope (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28534:5) at writeToModelIfNeeded (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28527:14) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28521:9 at validationDone (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28446:9)" 3 null null "TypeError: Cannot read property 'name' of null at ChildScope.$scope.ChangeOptions (pen.js:79:58) at fn (eval at compile (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:15156:15), :4:159) at ChildScope.$eval (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:17972:28) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:25711:13 at Object. (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28536:9) at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:357:20) at Object.$$writeModelToScope (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28534:5) at writeToModelIfNeeded (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28527:14) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28521:9 at validationDone (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28446:9)" Do anyone have any idea why this is happening. What i want to do is select a value from left drop down menu and dont allowing the user to select the same value from other drop down list. That meansif a user selects some value from left select box he will not be able to select that from right select box and vice versa.
推荐答案
试试这个。
$scope.ChangeOptions = function() {
var lsize = $scope.left.length;
var rsize = $scope.left.length;
for (var i = 0; i < lsize; i++) {
console.log($scope.left[i]);
if ($scope.left[i].name === $scope.rightmodel.name) {
$scope.left[i].disabled = true;
} else {
$scope.left[i].disabled = false;
}
}
for (var i = 0; i < rsize; i++) {
if ($scope.right[i].name === $scope.leftmodel.name) {
$scope.right[i].disabled = true;
} else {
$scope.right[i].disabled = false;
}
}
};
代码笔： https://codepen.io/anon/pen/dNYLpN
这篇关于从下拉列表中选择时，Angular JS ng-model变为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
