Question

我试图在按钮点击时显示/隐藏元素。下面是我到目前为止编写的代码。由于缺乏知识，我在编写Angular代码时遇到了麻烦。

我想要达到的目标是：默认情况下，只要用户点击+按钮，我就会看到第一个文本框。第二个文本框将可见，第三个相同。要删除这些框，我创建了一个-按钮。因此，一旦用户点击-按钮，最后一个框就会被隐藏。

<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

创建一个数组循环

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您应该使用一组对象。要添加使用push，请删除使用splice。检查此代码。

＆＃13;

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:""});
    }
});

＆＃13;

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

＆＃13;

在Angular中单击按钮时显示隐藏元素

2 个答案: