在按鈕上單擊角度顯示隱藏元素

Question

我試圖在按鈕單擊上顯示/隱藏元素。以下是我迄今爲止編寫的代碼。由於缺乏知識，我在編寫Angular代碼時遇到了麻煩。

我想實現的是：我有3個文本框，默認情況下，默認情況下會顯示3個文本框，只要用戶點擊+按鈕即可。第二個文本框將可見，第三個相同。要刪除框，我創建了一個-按鈕。所以，一旦用戶點擊-按鈕，最後一個框將被隱藏。

<div class="col-xs-10"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }"> 
<input name="city" id="city" type="text" class="form-control textbox1 txt-auto" required="required" placeholder="Job Location* " ng-model="formData.city"> 
<div class = "errorba" ng-show="errorcity">{{errorcity}}</div> 
</div></div> 
<div class="col-xs-2"> 
<button class="remove" ng-click="removeChoice()">-</button> 
</div> 


<button class="addfields" ng-click="addNewChoice()">+</button><br> 

<div class="col-xs-10"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity1 }"> 
<input name="city1" id="city1" type="text" class="form-control textbox1 txt-auto" required="required" placeholder="Job Location* " ng-model="formData.city1"> 
<div class = "errorba" ng-show="errorcity">{{errorcity1}}</div> 
</div></div> 
<div class="col-xs-2"> 
<button class="remove" ng-click="removeChoice()">-</button> 
</div> 


<button class="addfields" ng-click="addNewChoice()">+</button><br> 


<div class="col-xs-10"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }"> 
<input name="city2" id="city2" type="text" class="form-control textbox1 txt-auto" required="required" placeholder="Job Location* " ng-model="formData.city2"> 
<div class = "errorba" ng-show="errorcity2">{{errorcity2}}</div> 
</div></div> 
<div class="col-xs-2"> 
<button class="remove" ng-click="removeChoice()">-</button> 
</div> 


<button class="addfields" ng-click="addNewChoice()">+</button> 

我在addNewChoice（）和removeChoice（）下沒有任何東西。

Answer 1

我想你可能需要使用ng-repeat

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.arr = [{'city':'city1' },{'city':'city2' }]; 
 

 
$scope.addNewChoice = function(){ 
 
    $scope.arr.push({'city':'' }) 
 
} 
 

 
$scope.removeChoice = function(index){ 
 
    $scope.arr.splice(index,1) 
 
} 
 
}) 
 

 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <button class="addfields" ng-click="addNewChoice()">+</button> 
 
<div ng-repeat="item in arr">  <br> 
 

 
    <div class="col-xs-10"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity1 }"> 
 
    <input name="city1" id="city1" type="text" class="form-control textbox1 txt-auto" required="required" placeholder="Job Location* " ng-model="item.city"> 
 
    <div class = "errorba" ng-show="errorcity">{{errorcity1}}</div> 
 
    </div></div> 
 
    <div class="col-xs-2"> 
 
    <button class="remove" ng-click="removeChoice($index)">-</button> 
 

 
</div> 
 
</div> 
 
</div>

Answer 2

你應該使用對象的數組來創建數組循環了。添加使用push和刪除使用splice。檢查此代碼。

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.errorcity = ""; 
 
    $scope.jobs = [{text:""}]; 
 
    
 
    $scope.removeChoice = function(ind){ 
 
     $scope.jobs.splice(ind,1); 
 
    } 
 
    $scope.addNewChoice = function(){ 
 
     $scope.jobs.push({text:""}); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<div ng-repeat="j in jobs track by $index"> 
 
<div class="col-xs-10"> 
 
<div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }"> 
 
<input name="city" ng-model="j.text" id="city" type="text" class="form-control textbox1 txt-auto" required="required" placeholder="Job Location* " ng-model="formData.city"> 
 
<div class = "errorba" ng-show="errorcity">{{errorcity}}</div> 
 
</div> 
 
</div> 
 
<div class="col-xs-2"> 
 
<button class="remove" ng-click="removeChoice($index)">-</button> 
 
</div> 
 
<button class="addfields" ng-click="addNewChoice()">+</button><br> 
 
</div> 
 
</div>