使用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

回答

相關問題