AngularJS：如何仅为最后一个按钮创建动态字段按钮？

Question

在动态输入字段中，是否有任何选项仅针对最后一项实现plusSign = true？

(function() {
  var app = angular.module('managementApp', []);
  // var app = angular.module('managementApp', ['ngRoute']);
  app.controller('phonebookController', function($scope, $http) {
    $scope.dynamicField = function(buttonStatus, inputIndex) {
      if (!buttonStatus) {
        $scope.currentContact.contacts.push({
          "phone": ""
        });
      } else {
        $scope.currentContact.contacts.splice(inputIndex, 1);
      }
    };
    $scope.currentContact = [{
      "phone": "07875 506 426"
    }, {
      "phone": "+91 9895 319991"
    }, {
      "phone": "+44 7875 506 426"
    }];
    $scope.dynamicField = function(buttonStatus, inputIndex) {
      if (!buttonStatus) {
        $scope.currentContact.push({
          "phone": ""
        });
      } else {
        $scope.currentContact.splice(inputIndex, 1);
      }
    };
    $scope.checkIndex = function(totalCount, indexCount) {
      indexCount++;
      // alert(indexCount);
      /*if (totalCount === indexCount) {
					//alert("last one");
					$scope.plusSign = true;
				}else{
					$scope.plusSign = false;
				}*/
    };
  });
})();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="managementApp">
  <div class="row" ng-controller="phonebookController">
    <div class="form-group" ng-repeat="contact in currentContact" ng-init="checkIndex(currentContact.length, $index);">
      <label for="contact-number3" class="col-sm-3 control-label">Contact number {{$index + 1 }}</label>
      <div class="col-sm-9">
        <div class="input-group">
          <input type="tel" class="form-control" placeholder="Contact number {{$index + 1 }}" ng-model="contact.phone">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button"  ng-init="plusSign = true" 
              ng-click="plusSign = !plusSign; dynamicField(plusSign, $index);">
              <i class="glyphicon " ng-class="plusSign ? 'glyphicon-plus' : 'glyphicon-minus'"></i>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你可以在ng-repeat中使用$ last，如果重复元素在迭代器中是最后一个，则为true。或者你只能使用.row：last-of-type {/ ** /}来完成css。

Answer 2

在函数中检查$ last，例如： -

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="managementApp">
  <div class="row" ng-controller="phonebookController">
    <div class="form-group" ng-repeat="contact in currentContact" ng-init="checkIndex($last);">
      <label for="contact-number3" class="col-sm-3 control-label">Contact number {{$index + 1 }}</label>
      <div class="col-sm-9">
        <div class="input-group">
          <input type="tel" class="form-control" placeholder="Contact number {{$index + 1 }}" ng-model="contact.phone">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button"  ng-init="plusSign = true" 
              ng-click="plusSign = !plusSign; dynamicField(plusSign, $index);">
              <i class="glyphicon " ng-class="plusSign ? 'glyphicon-plus' : 'glyphicon-minus'"></i>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

控制器方法

$scope.checkIndex = function(last) {
       (last === true) 
                    $scope.plusSign = true;
                else
                    $scope.plusSign = false;

    };