选中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”值的复选框时，它从<input type="text" class="uncheck" disabled>删除了禁用的属性。 <input type="text" class="uncheck" disabled>

这是我的控制器：

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

希望有人可以帮助我，谢谢。

Answer 1

在forEach-loop使用ng-change指令和other复选框的测试值

 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模型。 请在AngularJS中也使用“值属性”来声明。 值的替代方法是“ 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>

您也可以在插件中对其进行检查： 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>