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

我是新手，尝试使用角度手。我使用ng-repeat制作了一个复选框列表，有五个复选框，并且只需要点击第一个复选框即可打开一个div。不知道如何打开。使用Angular Js点击第一个复选框后打开一个div 1.5.0

谢谢大家提前...

2016-03-15 Ravi Juneja

请为此创建plunker。 –

可以与复选框模型结合并可以切换基于期望复选框的模型值的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);

来源

2016-03-15 10:18:23 Harpreet

非常感谢您#Harpreet，它运作良好 –

您可以创建这样一个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>

来源

2016-03-15 09:46:50

这些是单选按钮，而不是复选框 – henrikmerlander

道歉我会编辑它 –

下面是一个例子：

<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" />

来源

2016-03-15 10:01:51 henrikmerlander

感谢您的答案。是否可以使用ng-repeat如下代码： -

取而代之的是将它们分开： - –

尝试此

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

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

来源

2016-03-15 10:02:58

虽然此代码可能会回答问题，但提供有关_why_和/或_how_t的其他上下文他的代码回答这个问题会显着提高其长期价值。请[编辑]您的回答添加一些解释。 –

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

回答

相关问题