gpt4 book ai didi

javascript - 选择框的 Angular 不可变数组

转载 作者:行者123 更新时间:2023-11-29 17:52:13 25 4
gpt4 key购买 nike

我的要求是有多个具有相同下拉列表(ng-options)数组的选择框,但如果我在一个选择框中选择一个值,它应该从另一个选择框下拉列表中删除。

在 on change 事件中,我尝试创建一个新数组,排除为第一个数组选择的项目。但它会从两个选择框中删除。就像一个不可变的 DS 总是返回原始的变异克隆。

需要关于是否有可能实现这种方式或是否有解决方法的建议

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

$scope.items = [];
$scope.selectedItem = { name: 'two', id: 27 };
$scope.items = [{name: 'one', id: 30 },{ name: 'two', id: 27 },{ name: 'threex', id: 50 }];
$scope.remove=function(data){
$scope.items=$scope.items.filter(item=>{
return item.name!==data.name;
});

});
<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">


<select ng-model="selectedItem" ng-change="remove(selectedItem)" ng-options="item.name for item in items track by item.id"></select>


<select ng-model="selectedItem1" ng-options="item.name for item in items track by item.id"></select>

</body>
</html>
 $scope.remove=function(data){
$scope.items=$scope.items.filter(item=>{
return item.name!==data.name;
});

最佳答案

我建议在 ng-options 语法中使用过滤器管道。看看plunker

 <select ng-model="selectedItem1" ng-options="item.name for item in items | filter: coolFilter1"></select>

<select ng-model="selectedItem2" ng-options="item.name for item in items | filter: coolFilter2"></select>

关于javascript - 选择框的 Angular 不可变数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42438150/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com