Question

我有以下情况：我有一组默认禁用的复选框。现在，在点击按钮1时，我需要启用复选框并显示按钮2和2。 3，然后隐藏按钮1。

点击按钮2或3时，我需要再次禁用复选框并在隐藏按钮2和按钮1时显示按钮1。 3。

我是AngularJS的新手，虽然我尝试使用ng-Click和ng-Disabled，但我还没有达到我所需要的水平。以下是我目前的样本：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button ng-model="!clicked" ng-show="!clicked">Button 1</button>
<button ng-model="clicked" ng-show="clicked">Button 2</button>
<button ng-model="clicked" ng-show="clicked">Button 3</button>


<div>
  <input type="checkbox" ng-disabled="clicked">Checkbox 1
  <input type="checkbox" ng-disabled="clicked">Checkbox 2
  <input type="checkbox" ng-disabled="clicked">Checkbox 3
  <input type="checkbox" ng-disabled="clicked">Checkbox 4
  <input type="checkbox" ng-disabled="clicked">Checkbox 5

</div>

＆＃13;

有人能指出我正确的方向吗？我错过了什么吗？

Answer 1

请查看工作示例 - http://plnkr.co/edit/niAmt0kfJyfAOYeEbVqL?p=preview

HTML

<button ng-show="clicked" ng-click="clicked = !clicked">Button 1</button>
<button ng-show="!clicked" ng-click="clicked = !clicked">Button 2</button>
<button ng-show="!clicked" ng-click="clicked = !clicked">Button 3</button>


<div>
  <input type="checkbox" ng-disabled="clicked">Checkbox 1
  <input type="checkbox" ng-disabled="clicked">Checkbox 2
  <input type="checkbox" ng-disabled="clicked">Checkbox 3
  <input type="checkbox" ng-disabled="clicked">Checkbox 4
  <input type="checkbox" ng-disabled="clicked">Checkbox 5

</div>

控制器

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.clicked = true;
});

Answer 2

编写controller来处理按钮，并为复选框提供禁用条件。控制器应该处理视图逻辑，而不是视图本身。

<强>控制器（mycontroller.js）：

angular.module("myApp")
.controller("MyController", function() {
    var self = this;

    self.checkboxesEnabled = false;

    self.enableBoxes = function() {
        self.checkboxesEnabled = true;
    }

    self.disableBoxes = function() {
        self.checkboxesEnabled = false;
    }
});

网页：

Answer 3

页;

<div ng-controller="MyCtrl">
<input    type="checkbox"   ng-disabled="checkMe"    />Toggles
<button ng-click="check()">disable/enable</button></div>

控制器

function MyCtrl($scope) {
    $scope.checkMe=false;
    $scope.check = function() {
    $scope.checkMe=!$scope.checkMe;
    }
}

Answer 4

您似乎误解了ng-model的用法。查看所有指令的Angular文档，它们非常简单。

在此处找到您想要的工作示例：http://jsfiddle.net/joshdmiller/hb7lu/

<button ng-show="checkboxesDisabled" ng-click="checkboxesDisabled = !checkboxesDisabled">Button 1</button>
<button ng-hide="checkboxesDisabled" ng-click="checkboxesDisabled = !checkboxesDisabled">Button 2</button>
<button ng-hide="checkboxesDisabled" ng-click="checkboxesDisabled = !checkboxesDisabled">Button 3</button>


<div>
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 1
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 2
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 3
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 4
    <input type="checkbox" ng-disabled="checkboxesDisabled">Checkbox 5

</div>

Answer 5

Here是适用于您的方案的工作人员。您不需要在按钮上使用ng-model。它不会做任何事情。另外，IMO checkBoxDisabled作为名称对模型更有意义。我做了一些更改，以使其工作。

  <button ng-click="vm.toggleDisable()" ng-show="vm.checkBoxDisabled">Button 1</button>
  <button ng-click="vm.toggleDisable()" ng-show="!vm.checkBoxDisabled">Button 2</button>
  <button ng-click="vm.toggleDisable()" ng-show="!vm.checkBoxDisabled">Button 3</button>


  <div>
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 1
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 2
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 3
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 4
    <input type="checkbox" ng-disabled="vm.checkBoxDisabled">Checkbox 5

  </div>

控制器： -

angular.module("myApp", [])
.controller('MyController', function() {
  var vm = this;
  vm.checkBoxDisabled = false;
  vm.toggleDisable = function() {
    vm.checkBoxDisabled = !vm.checkBoxDisabled;
  }
})

编辑：正如LionC建议的那样，理想情况下你应该把你的逻辑放在控制器中。我已经相应地更新了我的答案和插件。

AngularJS - 单击按钮时禁用复选框

5 个答案: