根据条件禁用 ui-sref [英] Disable ui-sref based on a condition
本文介绍了根据条件禁用 ui-sref的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
你能告诉我一种禁用提交按钮的方法,它通过以下方式更改为新状态:
提交
只有在表单有效时才应启用按钮.
ng-disabled
和 ui-sref
不起作用:
app.js 中的 canSave 函数是:
$scope.canSave = function(){返回 $scope.tickets.$dirty &&$scope.tickets.$valid;};
解决方案
您可以简单地将其与 ng-click
配对,以便 ng-disabled
起作用.>
.controller('myCtrl', function($scope, $state) {//这样你就可以从你的 ng-click 中调用 `$state.go()`$scope.go = $state.go.bind($state);})
<!-- 调用`go()`并传递你想要去的状态--><button ng-disabled="!canSave()" ng-click="go('view')>提交</button>
这是使用自定义指令的更奇特的方法:
angular.module('myApp', ['ui.router']).config(function($stateProvider) {$stateProvider.state('home', {网址:'/'});}).controller('myCtrl', function() {}).directive('uiSrefIf', function($compile) {返回 {范围: {val: '@uiSrefVal',如果:'=uiSrefIf'},链接:函数($scope,$element,$attrs){$element.removeAttr('ui-sref-if');$compile($element)($scope);$scope.$watch('if', function(bool) {如果(布尔){$element.attr('ui-sref', $scope.val);} 别的 {$element.removeAttr('ui-sref');$element.removeAttr('href');}$compile($element)($scope);});}};});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script><div ng-app="myApp" ng-controller="myCtrl"><表格名称=表格"><输入 ng-model="foo" ng-required="true"><button ng-disabled="form.$invalid"><a ui-sref-if="!form.$invalid" ui-sref-val="home">test</a>按钮></表单>
Can you tell me a way to disable the submit button, which changes to a new state by:
<a ui-sref="state">Submit</a>
The button should be enabled only when the form is valid.
ng-disabled
with ui-sref
does not work:
<form name="tickets">
<button ng-disabled="!canSave()"><a ui-sref="view">Submit</a></button>
</form>
canSave function inside app.js being:
$scope.canSave = function(){
return $scope.tickets.$dirty && $scope.tickets.$valid;
};
解决方案
You could simply pair it with ng-click
so that ng-disabled
will work.
.controller('myCtrl', function($scope, $state) {
// so that you can call `$state.go()` from your ng-click
$scope.go = $state.go.bind($state);
})
<!-- call `go()` and pass the state you want to go to -->
<button ng-disabled="!canSave()" ng-click="go('view')>Submit</button>
Here's a more fancy way using a custom directive:
angular.module('myApp', ['ui.router'])
.config(function($stateProvider) {
$stateProvider.state('home', {
url: '/'
});
})
.controller('myCtrl', function() {
})
.directive('uiSrefIf', function($compile) {
return {
scope: {
val: '@uiSrefVal',
if: '=uiSrefIf'
},
link: function($scope, $element, $attrs) {
$element.removeAttr('ui-sref-if');
$compile($element)($scope);
$scope.$watch('if', function(bool) {
if (bool) {
$element.attr('ui-sref', $scope.val);
} else {
$element.removeAttr('ui-sref');
$element.removeAttr('href');
}
$compile($element)($scope);
});
}
};
})
;
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="form">
<input ng-model="foo" ng-required="true">
<button ng-disabled="form.$invalid">
<a ui-sref-if="!form.$invalid" ui-sref-val="home">test</a>
</button>
</form>
</div>
这篇关于根据条件禁用 ui-sref的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文