我想在表格中实现一个功能,用户可以通过点击它来设置单元格的值。 可以说3-4个状态,也是附加的ng模型。
我在angularjs中查找了切换按钮,但它们只是开/关类型。
总之;单击该按钮将值设置为:活动,非活动,排除 寻找具有多种状态的解决方案。 对此的任何帮助都非常感谢。
答案 0 :(得分:8)
检查以下工作示例:
http://jsfiddle.net/vishalvasani/ZavXw/9/
和控制器代码
function MyCtrl($scope) {
$scope.btnarr=0;
$scope.btnTxt=["Active","Inactive","Excluded"]
$scope.change=function(){
switch($scope.btnarr)
{
case 0:
$scope.btnarr=1;
break;
case 1:
$scope.btnarr=2
break;
case 2:
$scope.btnarr=0;
break;
}
}
}
OR
较短版本的控制器
function MyCtrl($scope) {
$scope.btnarr=0;
$scope.btnTxt=["Active","Inactive","Excluded"]
$scope.change=function(){
$scope.btnarr = ($scope.btnarr + 1) % $scope.btnTxt.length;
}
}
和HTML
<div ng-controller="MyCtrl">
<button ng-modle="btnarr" ng-Click="change()">{{btnTxt[btnarr]}}</button>
</div>
答案 1 :(得分:3)
没有多少。
当我在Angular中制作菜单时,在每个项目上,我将有一个“选择”功能,然后从列表中选择该特定对象......
制作可迭代按钮更加顺畅:
var i = 0;
$scope.states[
{ text : "Active" },
{ text : "Inactive" },
{ text : "Excluded" }
];
$scope.currentState = $scope.states[i];
$scope.cycleState = function () {
i = (i + 1) % $scope.states.length;
$scope.currentState = $scope.states[i];
// notify services here, et cetera
}
<button ng-click="cycleState">{{currentState.text}}</button>
实际的状态数组甚至不需要成为$scope
的一部分,如果这是你使用这些对象的唯一地方 - 你需要拥有的唯一对象$scope
将currentState
,您在调用cycleState
方法时设置{。}}。
答案 2 :(得分:2)
这是一个有两种可能性的小提琴:从列表中选择状态或通过单击按钮本身循环。
JS代码如下所示:
angular.module('test').directive('toggleValues',function(){
return {
restrict: 'E',
replace: true,
template: '<div>Set Status:<div ng-repeat="value in values" class="status" ng-click="changeTo($index)">{{value}}</div><span ng-click="next()">Current Status (click to cycle): {{values[selectedValue]}}</span></div>',
controller: ['$scope', '$element', function ($scope, $element) {
$scope.values = ["Active", "Inactive", "Pending"];
$scope.changeTo = function (index) {
$scope.selectedValue = (index < $scope.values.length) ? index : 0;
};
$scope.next = function () {
$scope.selectedValue = ($scope.selectedValue + 1) % $scope.values.length;
// the modulo is stolen from Norguard (http://stackoverflow.com/a/18592722/2452446) - brilliant idea
};
$scope.selectedValue = 0;
}]
};
});
HTML:
<div ng-app="test">
<toggle-values></toggle-values>
</div>