你可以告诉我一种方法来禁用提交按钮,这将按照新的状态
< a ui-sref =“state”> Submit< / a>
只有当表单有效时才应启用该按钮。
使用ui-sref禁用ng功能不起作用:
<form name="tickets"> <button ng-disabled="!canSave()"><a ui-sref="view">Submit</a></button> </form>
app.js中的canSave功能是:
$scope.canSave = function(){ return $scope.tickets.$dirty && $scope.tickets.$valid; };
您可以简单地将其与ng点击配对,以便ng禁用将工作。
原文链接:https://www.f2er.com/angularjs/144737.html.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>
以下是使用自定义指令的更加奇特的方式:
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>