Question

你能告诉我如何展示和隐藏角度元素吗？在下面的示例中，我想最初隐藏#item-details并在选中复选框时显示，如果取消选中则显示

<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
  <div class="col-md-2"><input type="checkbox" name="item" value="new" />Add New Item <br /></div>

<div class="col-md-6" id="item-details" ng-show="">
<div class="btn-group" role="group" aria-label="...">
       <button type="button" class="btn btn-default">Left</button>
       <button type="button" class="btn btn-default">Middle</button>
       <button type="button" class="btn btn-default">Right</button>
     </div>
  </div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js">/script>
<script>
   var app = angular.module('app', [])
   .controller('checkController', function() { });
    this.
});

</script>
  </body>
</html>

Answer 1

首先将模型分配给复选框

<div class="col-md-2"><input type="checkbox" name="item" value="new" ng-model="checked" />Add New Item <br /></div>

然后只需将相同的模型值分配给ng-show

中的项目详细信息

<div class="col-md-6" id="item-details" ng-show="checked">

你已经完成了

Answer 2

Example

href

HTML：

 var app = angular.module('app', []);
 app.controller('checkController', function($scope) {
    $scope.hide = false;
    $scope.checkboxClick = function() {
      $scope.hide = !$scope.hide;
    };

  });

Answer 3

以某种方式，ng-show不起作用，但我使用ng-if作为完美工作的工作。

<input id='".$myboxid."' name='cplace[]' checked type='checkbox' value='".$box."'><label for='".$myboxid."'>".$boxname."</label>

希望有所帮助。

Answer 4

    <div class="container" ng-controller="checkController">
    <div class="row">
      <div class="col-md-2"><input type="checkbox" name="item" value="new" ngmodel="checked" ngchecked="checked == '1'"/>Add New Item <br /></div>

    <div class="col-md-6" id="item-details" ngshow = "checked == '1'">
    <div class="btn-gr`enter code here`oup" role="group" aria-label="...">
           <button type="button" class="btn btn-default">Left</button>
           <button type="button" class="btn btn-default">Middle</button>
           <button type="button" class="btn btn-default">Right</button>
         </div>
      </div>
    </div>
    </div>

Just do above

如何在Angularjs

4 个答案: