2017-07-06 75 views
-1

例如:我選擇了4項。當我在選擇中選擇第一個項目時,它將顯示與之前相同的項目的第二個選擇,但我選擇的項目將被禁用。對於下一個選擇也是如此,直到它仍然是1個可用的選項。如何根據以前在Angular中選擇的項目禁用下一個ng選擇項目?

P.s.每隔下一個選擇,應自動選擇第一個可用項目。

我附加了snipper在下面,我直觀地顯示,我想要達到的流量。

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

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

 
    $scope.rules1 = [{ 
 
    type: 'first item', 
 
    value: 'first item', 
 
    disabled: false 
 
    }, { 
 
    type: 'second item', 
 
    value: 'second item', 
 
    disabled: false 
 
    }, { 
 
    type: 'third item', 
 
    value: 'third item', 
 
    disabled: false 
 
    }, { 
 
    type: 'fourth item', 
 
    value: 'fourth item', 
 
    disabled: false 
 
    }]; 
 

 
    $scope.rules2 = [{ 
 
    type: 'first item', 
 
    value: 'first item', 
 
    disabled: true 
 
    }, { 
 
    type: 'second item', 
 
    value: 'second item', 
 
    disabled: false 
 
    }, { 
 
    type: 'third item', 
 
    value: 'third item', 
 
    disabled: false 
 
    }, { 
 
    type: 'fourth item', 
 
    value: 'fourth item', 
 
    disabled: false 
 
    }]; 
 

 
    $scope.rules3 = [{ 
 
    type: 'first item', 
 
    value: 'first item', 
 
    disabled: true 
 
    }, { 
 
    type: 'second item', 
 
    value: 'second item', 
 
    disabled: true 
 
    }, { 
 
    type: 'third item', 
 
    value: 'third item', 
 
    disabled: false 
 
    }, { 
 
    type: 'fourth item', 
 
    value: 'fourth item', 
 
    disabled: false 
 
    }]; 
 
});
/* Put your css in here */
<!DOCTYPE html> 
 
<html ng-app="ngoptions"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script data-require="[email protected]" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/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="item" ng-options="item.type as item.value disable when item.disabled for item in rules1"> 
 
    <option value="" style="display: none" selected="selected">Select When 
 
    </option> 
 
    </select> 
 
    <br> 
 
    after selecting first select, first item: 
 
    <br> 
 
    <select ng-model="item1" ng-options="item.type as item.value disable when item.disabled for item in rules2"> 
 
    <option value="" style="display: none" selected="selected">Select When 
 
    </option> 
 
    </select> 
 
    <br> 
 
    after selecting second select, second item: 
 
    <br> 
 
     <select ng-model="item2" ng-options="item.type as item.value disable when item.disabled for item in rules3"> 
 
    <option value="" style="display: none" selected="selected">Select When 
 
    </option> 
 
    </select> 
 
    
 
</body> 
 

 
</html>

請幫助我。將是偉大的!

回答

0

由於您的rule1,rule2和rule3數組完全相同,所以我首先將它放到一個規則中。如果沒有,你需要確保三個相同的數組以相同的方式更新。

ng-change通常對於這些類型的輸入非常有效。當您選擇一個選項時,它將觸發該更改事件,並且您可以創建自定義函數來處理它。

注意,你的ng-model與你的循環中的項目命名相同,但這些不是同一個東西。

<select ng-model="item" ng-options="item.type as item.value disable when item.disabled for item in rules" data-ng-change="select(item)"> 
    <option value="" style="display: none" selected="selected">Select When 
    </option> 
</select> 

我添加了在輸入模型中傳遞的select函數(您選擇的輸入選項的值)。

在您的控制器

然後,你可以有某種類型的函數來處理的變化,如:

scope.select = function (value) { 

    if (!value) { return; } 

    for (var i=0;i<$scope.rules.length;++i) { 
     if ($scope.rules[i].value === value) { 
     $scope.rules[i].disabled = true; 
     } 
    } 
}; 

http://jsbin.com/tomoma/edit?html,js,console,output

相關問題