Question

我是新人，尝试着我的双手。我使用ng-repeat制作了一个复选框列表，有五个复选框，只想点击第一个复选框就打开一个div。不知道如何打开。

提前谢谢大家......

Answer 1

您可以使用复选框绑定模型，并可以根据所需复选框的模型值切换div的显示。我创建了一个相同的plnkr：http://plnkr.co/edit/zcHbuwsUehDfBkgJWlIc?p=preview

HTML代码

//HTML
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example12-production</title>


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



</head>
<body ng-app="docsSimpleDirective">
  <div ng-controller="Controller">
  <div ng-repeat="cb in chkboxArr">
    <input type="checkbox" ng-model="chkboxArrModel[$index]">{{$index}}
  </div>

  <div ng-if="chkboxArrModel[0]">Toggle me with first checkbox</div>
</div>
</body>
</html>

和Javascript代码

//JS

(function(angular) {
  'use strict';
angular.module('docsSimpleDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.chkboxArr = [1,2,3,4];
    $scope.chkboxArrModel = [];
  }]);
})(window.angular);

Answer 2

您可以创建一个这样的div：

<div ng-show="ModelData.Passengers == 'One'">
    The actual div content you have in the div you want.
</div>

假设您的单选按钮代码如下：

  <div>
    <label>
      <input type="radio" id="PassengersId1" name="PassengersName1" ng-model="ModelData.Passengers" value="One" />One
          <input type="radio" id="PassengersId2" name="PassengersName2" ng-model="ModelData.Passengers" value="Two" />Two
    </label>
  </div>

Answer 3

以下是一个例子：

<div ng-show="checkbox1">Show me</div>

<input type="checkbox" ng-model="checkbox1"/>
<input type="checkbox" ng-model="checkbox2" />
<input type="checkbox" ng-model="checkbox3" />

Answer 4

试试这个

         <div ng-show="chk1">Div1</div>

         <input type="checkbox" ng-model="chk1"/>

使用Angular Js 1.5.0单击第一个复选框后打开div

4 个答案: