angularjs – 根据条件禁用ui-sref

前端之家收集整理的这篇文章主要介绍了angularjs – 根据条件禁用ui-sref前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
你可以告诉我一种方法来禁用提交按钮,这将按照新的状态

< 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禁用将工作。
.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>
原文链接:https://www.f2er.com/angularjs/144737.html

猜你在找的Angularjs相关文章