如何在AngularJS中进行ng-click
我在ng-repeat里面有这个代码:
<a href="#" class="disabled" ng-click="doSomething(object)">Do something</a>
当class="disabled"
时,如何使button被禁用的条件。
我怎样才能在HTML中使用该类的条件,
或者有没有办法做到这一点在JavaScript看起来像这样:
$('.do-something-button').click(function(){ if (!$(this).hasClass('disabled')) { do something } });
在指令之外的任何地方操作DOM(包括检查属性)是不好的。 您可以添加一些值来指示链接是否被禁用。
但其他问题是,ngDisabled不能在除了表单控件之外的任何东西上工作,所以你不能在<a>使用它,但你可以使用它与<button>和样式作为链接。
另一种方法是使用像isDisabled || action()
这样的expression式的懒评估 isDisabled || action()
如果isDisabled
为true,则不会调用isDisabled
。
这里有两个解决scheme: http : //plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview
我们可以有条件地添加ng-click事件,而不使用禁用的类。
HTML:
<div ng-repeat="object in objects"> <span ng-click="!object.status && disableIt(object)">{{object.value}}</span> </div>
我使用&&expression式,这对我来说是完美的。
例如,
<button ng-model="vm.slideOneValid" ng-disabled="!vm.slideOneValid" ng-click="vm.slideOneValid && vm.nextSlide()" class="btn btn-light-green btn-medium pull-right">Next</button>
如果vm.slideOneValid
为false,则不会触发expression式的第二部分。 我知道这是把逻辑放到DOM中,但是这是一个很简单的方法,让ng-disabled和ng-click放置的很好。
只要记住添加ng模型到元素使ng禁用的工作。
你可以尝试使用ng-class
。
这是我的简单例子:
http://plnkr.co/edit/wS3QkQ5dvHNdc6Lb8ZSF?p=preview
<div ng-repeat="object in objects"> <span ng-class="{'disabled': object.status}" ng-click="disableIt(object)"> {{object.value}} </span> </div>
状态是对象的一个自定义属性,你可以任意命名。
ng-class
的disabled
是一个CSS类名, object.status
应该是true
或false
你可以在函数disableIt
改变每个对象的状态 。
在你的控制器中,你可以这样做:
$scope.disableIt = function(obj) { obj.status = !obj.status }
我也有这个问题,我只是发现,如果你只是删除“#”问题就会消失。 喜欢这个 :
<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>