Javascript Angular JS将选项添加到ng上的下拉菜单单击无法正常工作
我对angularJS非常陌生。我正在尝试为用户创建一个界面，用户可以从两个下拉列表中选择两个项目。它们实际上是相同的选项。当用户从左侧下拉列表中选择某个选项时，他将无法从右侧下拉列表中选择相同的选项，反之亦然。用户还将有一个按钮来添加更多选项。这段代码在任何情况下都可以正常工作，但是当用户单击按钮添加更多选项时，新添加的选项根本不起作用。 这是我的全部代码：Javascript Angular JS将选项添加到ng上的下拉菜单单击无法正常工作,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我对angularJS非常陌生。我正在尝试为用户创建一个界面，用户可以从两个下拉列表中选择两个项目。它们实际上是相同的选项。当用户从左侧下拉列表中选择某个选项时，他将无法从右侧下拉列表中选择相同的选项，反之亦然。用户还将有一个按钮来添加更多选项。这段代码在任何情况下都可以正常工作，但是当用户单击按钮添加更多选项时，新添加的选项根本不起作用。 这是我的全部代码： <html> <head> <script src="https://cdnjs.clou
<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>
<button ng-click="addOptions()">Click Me</button>
</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.addOptions=function()
{
var banana={
"name": "banana",
"value": "Tasty Banana",
"disabled": false
};
var orange={
"name":"orange",
"value":"Soour Orange",
"disabled":false
};
$scope.left.push(banana);
$scope.left.push(orange);
$scope.right.push(banana);
$scope.right.push(orange);
};
$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;
}
}
};
}
);
</script>
</body>
</html>
从左侧选择一项，从右侧选择一项
点击我
变量模块=角度模块（“应用程序”，[]）；
module.controller（“MyCtrl”，
职能（$范围）{
$scope.left=[{
“名称”：“苹果”，
“价值”：“漂亮的苹果”，
“禁用”：错误
}, {
“名称”：“橙色”，
“值”：“黄橙色”，
“残疾”：正确
}, {
“名称”：“浆果”，
“价值”：“蓝莓”，
“禁用”：错误
}];
$scope.right=[{
“名称”：“苹果”，
“价值”：“漂亮的苹果”，
“残疾”：正确
}, {
“名称”：“橙色”，
“值”：“黄橙色”，
“禁用”：错误
}, {
“名称”：“浆果”，
“价值”：“蓝莓”，
“禁用”：错误
}];
$scope.leftmodel=$scope.left[0]；
$scope.rightmodel=$scope.right[1]；
$scope.addOptions=function（）
{
香蕉变种={
“名称”：“香蕉”，
“价值”：“美味香蕉”，
“禁用”：错误
};
变种橙={
“名称”：“橙色”，
“价值”：“苏尔橙”，
“禁用”：错误
};
$scope.left.push（香蕉）；
$scope.left.push（橙色）；
$scope.right.push（香蕉）；
$scope.right.push（橙色）；
};
$scope.ChangeOptions=函数（）{
var lsize=$scope.left.length；
var rsize=$scope.left.length；
对于（变量i=0；i我注意到另一件奇怪的事。它可以在第88行处理名称。但是它在同一行失败，说它在第88行找不到
nullnamefori$scope.ChangeOptions = function() {
var lsize = $scope.left.length;
var rsize = $scope.left.length;
var i = 0;
var i = 0;
for(i; i < lsize; i++) {
//
}
// After the previous loop, i will be 3
for(i; i < rsize; i++) {
$scope.ChangeOptions=function（）{
var lsize=$scope.left.length；
var rsize=$scope.left.length；
var i=0；
var i=0；
对于（i；i这将导致第二个循环从i=3开始，因此它找不到
$scope.right[3].namej $scope.addOptions=function()
{
var leftOption = $scope.leftmodel;
var rightOption = $scope.rightmodel;
function newFruit(option){
var fruit = {
"name": option,
"value": "",
"disabled": false
};
return fruit;
}
$scope.left.push(newFruit(leftOption));
$scope.right.push(newFruit(rightOption));
};
您的代码中有两个缺陷 第一个是将同一对象推入
addOptions（）leftrightleftmodelundefinedangular.copy（）”橙色“$scope.addOptions = function() {
var banana = {
"name": "banana",
"value": "Tasty Banana",
"disabled": false
};
var orange = {
"name": "sorange",
"value": "Soour Orange",
"disabled": false
};
$scope.left.push(angular.copy(banana));
$scope.left.push(angular.copy(orange));
$scope.right.push(angular.copy(banana));
$scope.right.push(angular.copy(orange));
};