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。或者你可以用 css only 和 .row:last-of-type {/**/} 来完成。

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;

    };

AngularJS : 如何为最后一个按钮制作动态字段按钮？

AngularJS : How to make dynamic field button only for last button?

javascript

dynamic

angularjs

angularjs-ng-repeat