[英]Remove/hide the item from the ng-option if the item is selected by another select box inside ng-repeat
How to remove/hide the item from ng-option inside ng-repeat if item is selected by another ng-option?如果项目被另一个 ng-option 选择,如何从 ng-repeat 中的 ng-option 中删除/隐藏项目?
<table class="table table-bordered table-condensed">
<tr>
<th>Column Name</th>
<th>Map to field</th>
</tr>
<tr ng-repeat="head in headers">
<td>{{ head }}</td>
<td>
<select ng-model="selectedColumn[head]"
ng-change="selectColumn(selectedColumn[head])"
ng-options="row for row in data">
<option value="">select</option>
</select>
</td>
</tr>
</table>
$scope.headers = ["foo", "bar", "baz"];
$scope.data =["alpha", "beta", "gamma"];
$scope.selectedColumn = {};
$scope.selectColumn = function(selectedhead) {
// $scope.fileData.headers.splice(selectedhead);
$scope.data = $scope.data.filter(function(item){
return !selectedhead || !angular.equals(item, selectedhead);
});
}
from above code the item get removed from data, however the shows select.kindly advise, thanks in advance从上面的代码中,该项目从数据中删除,但是显示选择。请告知,提前致谢
The above code does the job.上面的代码完成了这项工作。 I assume your question is, after removing all elements from
$scope.data
you don't want the user to access that dropdown which shows 'select', right?我假设您的问题是,从
$scope.data
删除所有元素后,您不希望用户访问显示“选择”的下拉列表,对吗?
All you need to do is disable the <select>
tag when the $scope.data
array gets empty.您需要做的就是在
$scope.data
数组变空时禁用<select>
标记。
The Code is illustrated bellow -守则如下图所示 -
var app = angular.module("myApp", []); app.controller('testCtrl', ['$scope', function ($scope) { $scope.headers = ["foo", "bar", "baz"]; $scope.data =["alpha", "beta", "gamma"]; $scope.selectedColumn = {}; $scope.emptyArr=false; $scope.selectColumn = function(selectedhead) { // $scope.fileData.headers.splice(selectedhead); $scope.data = $scope.data.filter(function(item){ return !selectedhead || !angular.equals(item, selectedhead); }); console.log($scope.data); if($scope.data==""){ // this disables the <select> tag $scope.emptyArr=true; } } }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="testCtrl"> <table class="table table-bordered table-condensed"> <tr> <th>Column Name</th> <th>Map to field</th> </tr> <tr ng-repeat="head in headers"> <td>{{ head }}</td> <td> <select ng-model="selectedColumn[head]" ng-change="selectColumn(selectedColumn[head])" ng-options="row for row in data" ng-disabled="emptyArr"> <option value="">select</option> </select> </td> </tr> </table> </div>
Hope That's what you asked for.. Cheers!希望这就是你所要求的..干杯!
~ NiKhIL 〜镍
s index.html s index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css"></style>
<body>
<div ng-app="App" ng-controller="selectController">
<div class="container">
<div class="row">
<div class="col-12">
<table class="table table-bordered table-condensed">
<tr>
<th>Column Name</th>
<th>Map to field</th>
</tr>
<tr ng-repeat="head in headers">
<td>{{ head }}</td>
<td>
<select ng-model="selectedColumn[head]"
class="form-control"
ng-options="opt for opt in filterRow(head)">
<option value="">select</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('App', []);
app.controller('selectController', function($scope) {
$scope.headers = ["foo", "bar", "baz"];
$scope.data =["alpha", "beta", "gamma"];
$scope.selectedColumn = {};
// use this insted
$scope.filterRow = function(head) {
return $scope.data.filter(function(d) {
return !(Object.values($scope.selectedColumn)).includes(d) || $scope.selectedColumn[head] === d;
})
}
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.