Angularjs 选中复选框启用输入字段

Question

我是 AngularJS 的新手，我的问题是：

我有一个这样的循环：

 <body ng-app="ngToggle">
    <div ng-controller="AppCtrl">
        <input type="checkbox" ng-repeat="btn in btns" class="here" value="{{btn.value}}">

        <input type="text" class="uncheck" disabled>
    </div>
</body>

其中一个复选框的值为 "OTHER"，我需要做的是：选中具有 "OTHER" 值的复选框时，它会从 [=13] 中删除禁用属性=]

这是我的控制器：

angular.module('ngToggle', [])
    .controller('AppCtrl',['$scope', function($scope){
        $scope.btns = [
        {value:'one'},
        {value:'two'},
        {value:'other'}
        ];
}]);

希望有人能帮助我，谢谢

Answer 1

Use ng-change directive and test value of other checkbox in forEach-loop

angular.module('ngToggle', [])
  .controller('AppCtrl', ['$scope',
    function($scope) {
      $scope.disabled = true;
      $scope.btns = [{
        value: 'one'
      }, {
        value: 'two'
      }, {
        value: 'other'
      }];
      $scope.onChange = function() {
        $scope.btns.forEach(function(btn) {
          if (btn.value === 'other' && btn.status === true) {
            $scope.disabled = false;
          } else {
            $scope.disabled = true;
          }
        });
      }
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="ngToggle">
  <div ng-controller="AppCtrl">
    <input type="checkbox" ng-repeat="btn in btns" class="here" ng-model='btn.status' ng-change='onChange()'>

    <input type="text" class="uncheck" ng-disabled='disabled'>
  </div>
</body>

Answer 2

使用 ng-models。请避免在 AngularJS 中使用 "values attribute"。值的替代项是 "ng-init"。无论如何，这是一个工作代码：

<!DOCTYPE html>
<html >

  <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  </head>

  <body ng-app="ngToggle">
    <div ng-controller="AppCtrl">
        <p ng-repeat="btn in btns">
          <input type="checkbox" ng-model="btn.bool" value="ss"  class="here" > {{ btn.value }}
        </p>
        <input type="text" ng-model="textModel" class="uncheck" ng-disabled="other.bool">
        <p>{{ other.bool  }} -- {{textModel  }}</p> 
    </div>
    <script type="text/javascript">
        angular.module('ngToggle', [])
            .controller('AppCtrl',['$scope', function($scope){
                $scope.btns = [
                {value:'one', bool:false},
                {value:'two', bool:true},
                {value:'other', bool:true}
                ];
                $scope.otherBool = $scope.btns[2]['bool'];
                $scope.btns.map(function(obj){
                  //alert(JSON.stringify(obj))
                  if((obj.value) == 'other'){
                    $scope.other = obj;
                  }
                });
        }]);
    </script>
  </body>
</html>

您也可以在 plunker 中查看：http://plnkr.co/edit/GODfWbhlWvzjLKHFcEYs?p=preview

Answer 3

这样试试。

angular.module('ngToggle', [])
    .controller('AppCtrl',['$scope', function($scope){
        $scope.btns = [
        {value:'one',name:"one"},
        {value:'two',name:'two'},
        {value:'other',name:'other'}
        ];
      
       $scope.disable=true;
      
      $scope.check = function(value){
        if(value == "'other'")
          $scope.disable = false;
        else
           $scope.disable=true;
      }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ngToggle">
    <div ng-controller="AppCtrl">
      <div  ng-repeat="btn in btns">
        <input type="checkbox" ng-model="btn.value" ng-true-value="'{{btn.value}}'" ng-change="check(btn.value)" >{{btn.name}}
      </div>
        <input type="text" class="uncheck" ng-disabled='disable'>
    </div>
</div>

Angularjs 选中复选框启用输入字段

Angularjs checkbox checked enables input field

javascript

checkbox

jquery

angularjs

angularjs-ng-disabled