代码之家 › 专栏 › 技术社区 › bafix2203

未选中AngularJS时禁用按钮

angular-ngmodel angularjs

0

bafix2203 · 技术社区 · 7 年前

我只想在 modelCheck 被检查,并且 disable 什么都不是 checked 我的代码:HTML: HTML格式:

  <table>
  <tr>
    <th>name</th>
     <th><button class="btn" ng-if="(modelCheck | json) != ({} | json)" ng-click="post()">post</button></th>
      <th><button class="btn disabled" ng-if="(modelCheck | json) == ({} | json)" ng-click="post()">post</button></th>
  </tr>
  <tr ng-repeat="x in messages">
    <td>{{x.name}}</td>
    <td><input type="checkbox" ng-model="modelCheck[x.name]"/></td>
  </tr>
</table>

JS公司:

 $scope.modelCheck = {};

  $scope.messages = 
    [
        {
            "name": "eva",
        },
        {
            "name": "ben",
    },
 ];

$scope.post = function(){
    var data = [];
       for (var k in $scope.modelCheck) {
           if ($scope.modelCheck.hasOwnProperty(k) && $scope.modelCheck[k]) {
            data.push({'name': k});
           }
       }
       console.log(data);
       // do with data as you wish from here
    };

我的强盗: http://next.plnkr.co/edit/FudqIFQ1Pe0Vfhvq

感谢您的回答和帮助!

1 回复 | 直到 7 年前

1

Madhan Varadhodiyil 7 年前

您可以使用ng disabled来执行此操作。

<button class="btn"  ng-disabled="!isSelected()" ng-click="post()">post</button>

在JavaScript中:

$scope.isSelected = function() {
    var cnt = 0; 
    Object.keys($scope.modelCheck).forEach(function (e) {
        if ($scope.modelCheck[e]) {
            cnt +  = 1; 
        }
    }); 
    if (cnt > 0) {
        return true; 
    }
    else {
        return false; 
    }
}

Plunker demo . 希望这有帮助