I'm having some troubles trying to reach a solution for this problem:
I have an ng-repeat of items, and those items need to be sorted by a dropdown of numbers (I don't need this to be done dinamically, I just need to assign a values to each item). First of all, I need to display a dropdown with values from 1 to items.length;
<div ng-repeat="item in items">
<span>{{item.name}}</span>
<span></span> <!-- Here I should display a dropdown with values from 1 to items.length -->
</div>
Besides that, it'd be great if I can make the dropdown values mutually exclusive between them. For example, if I choose "1" value for the dropdown in first item, "1" should not be an option in the all other dropdowns.
Here there is a fiddle .
Any help?
Thanks!
I think this code will resolve your problems
<div ng-app>
<div ng-controller="testCTRL">
{{selectedItems}}
<div ng-repeat="item in items">
<span>{{item.name}}</span>
<select ng-model="$parent.selectedItems[$index]">
<option value="undefined"></option>
<option ng-repeat="it in items" ng-show="itShouldBeShowed($index)" ng-value="$index">{{$index}}</option>
</select>
</div>
</div>
And here the JS
function testCTRL($scope) {
$scope.selectedItems = [undefined,undefined,undefined];
$scope.items = [{name: "a"},{name: "b"},{name: "c"}];
$scope.itShouldBeShowed = function(value){
var found = false;
$scope.selectedItems.forEach(function(item){
if(item * 1 === value){
found = true;
}
});
return !found;
};
}
Here you have jsfiddle
You could also use a scope watch to see which items were selected:
HTML:
<div ng-app>
<div ng-controller="testCTRL">
<div ng-repeat="item in items">
<span>{{item.name}}</span>
<span>
<select ng-model="modelValues[item.name]">
<option></option>
<option ng-repeat="value in items" ng-disabled="value.disabled">{{value.value}}</option>
</select>
</span>
</div>
</div>
</div>
JS:
function testCTRL($scope) {
$scope.items = [{name: "a", value: 1, disabled: false},
{name: "b", value: 2, disabled: false},
{name: "c", value: 3, disabled: false}];
$scope.modelValues = {};
$scope.$watch('modelValues', function(newVal, oldVal){
for(var i = 0; i < $scope.items.length; i++){
$scope.items[i].disabled = false;
angular.forEach($scope.modelValues, function(value, key) {
//Value/Key are strings, you cannot use the strict equality operator
if($scope.items[i].value == value){
$scope.items[i].disabled = true;
}
});
}
}, true); // <-- objectEquality check. Expensive!
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.