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

时间:2016-06-06 04:25:53

标签: javascript jquery angularjs checkbox angularjs-ng-disabled

我在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>

其中一个复选框的值为&#34; OTHER&#34;,我需要做的是:当复选框带有&#34; OTHER&#34;检查值,从<input type="text" class="uncheck" disabled>

中删除已禁用的属性

这是我的控制者:

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

希望有人可以帮助我, 感谢。

3 个答案:

答案 0 :(得分:2)

  

ng-change

中使用other指令和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>

答案 1 :(得分:0)

使用ng-models。请避免在AngularJS中使用“values属性”。值的替代方法是“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

答案 2 :(得分:0)

尝试这样。

&#13;
&#13;
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;
      }
}]);
&#13;
<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>
&#13;
&#13;
&#13;