在AngularJS中定义第二个ng-click

这里是使用AngularJS单击按钮文本颜色的代码。在AngularJS中定义第二个ng-click

<button ng-class="myClass" 
    ng-click="myClass='red'" 
    ng-init="myClass='blue'"> 
some text 
</button>

http://jsfiddle.net/rLkb5/2/

是否有可能改变颜色为绿色。第二次点击？（蓝色 - >红色 - >绿色）

我的直觉告诉我，没有控制器+自定义JS代码是不可能的，但可能有一个简单的方法。

来源

2013-03-29 mh2

为什么你觉得没有控制器需要进行状态改变操作？这个状态不需要存储在任何地方吗？下面提供的解决方案可以工作，但是它们要求您在模板中添加一些合理的逻辑，这样不够优雅，会妨碍测试，并且会使代码的可移植性降低。你能详细说明一下你的用例吗？ –

@JoshDavidMiller没有用例。我只是问是否有可能在酒吧里做foo。对我来说，听起来很奇怪，有些方法适用于2个状态，但不适用于3个状态，但我明白第一个红色 - >蓝色不是关于状态。 – mh2

检查，如果这是可以接受的

<div ng-app> 
    <button ng-class="myClass" ng-click="counter = counter + 1; myClass=classes[counter % 3]" ng-init="myClass='blue'; classes=['blue', 'red', 'green']; counter=0">some text</button> 
</div>

演示：Fiddle

来源

2013-03-29 04:05:27

嗯，比我的例子更强健一点：D – Xesued

有可能更好的办法，但如果你重命名你的类：

.statetrue{ 
    color:red 
} 

.statefalse{ 
    color:blue 
}

然后，你的按钮：

<button ng-class="'state' + myClass" ng-click="myClass = !myClass" ng-init="myClass=true">

来源

2013-03-29 04:12:48 Xesued

哪里是绿色的方式？ :) – mh2

function MyCtrl($scope) { 
    $scope.active = false; 
    $scope.toggleActive = function() { 
    $scope.active = !$scope.active; 
}; 
}

。

<div ng-class="{red: !active, green: active}" ng-click="toggleActive()"></div>

ngClass，给定对象的情况下，设置其中的属性值是真实的类。

注意：视图不应该包含任何业务逻辑，因为它们很难测试;他们只应该与控制器进行交互。

Clarifition上：

你不应该做的是，直接从您的视图更改作用域属性。在控制器中有一个函数作为一个包装器，它可以为你做到这一点。视图可以改变自身的渲染方式，这取决于控制器的范围属性和调用函数来操作数据。另外，控制器根本不知道你想怎么样显示的数据，它应该表现得好像根本没有任何视图（实际上，视图应该是可替换的）。你想申请哪个CSS类不是你的控制者应该知道/决定的。

来源

2013-03-29 06:31:55

Right，View的不应该包含业务逻辑。那么我不应该使用第一个示例使用View将颜色从红色更改为蓝色？ – mh2

更新了我的回答，以澄清 –

明白！太糟糕了，我无权投票。我希望别人会这样做。 – mh2

在AngularJS中定义第二个ng-click

回答

相关问题