Zeige Elemente ausblenden auf Schaltfläche klicken in Angular

Question

Ich versuche Elemente auf Knopfdruck zeigen/ausblenden. Unten sind die Codes, die ich bisher geschrieben habe. Ich stehe vor Schwierigkeiten beim Schreiben von Angular Code wegen mangelndem Wissen.

Was ich erreichen möchte ist: Ich habe 3 Textfelder, die erste Box wird standardmäßig angezeigt, sobald Benutzer auf + Schaltfläche klicken. Die zweite Textbox wird sichtbar und die gleiche für die dritte. Um die Boxen zu entfernen, habe ich eine - Schaltfläche erstellt. So, sobald Benutzer auf - Schaltfläche letzte Schaltfläche klicken, wird ausgeblendet.

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

Ich habe nichts unter addNewChoice() und removeChoice().

Answer 1

Ich glaube, Sie könnten ein Array-Schleife erstellen müssen es 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

Verwendung Sie sollten eine Reihe von Objekten zu verwenden. Für weitere Verwendung push und zum Entfernen verwenden splice. Überprüfen Sie diesen Code.

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>