Question

在我的网站上是通过积分创建的用户列表。用户从一个开始，然后如果他们希望添加另一个，他们可以单击“添加”，它应该在数组内添加一个空值的新对象，用户可以输入一个新值。用户可以继续添加，直到他们有5.我该怎么做？以下是我的代码。

我想：

用户可以创建通过点添加val =“”的新项目，然后用户可以通过输入更改值。
在5点之后不再允许。

感谢您的帮助！

//HTML

<table>
    <tr ng-repeat="item in viaPoints">
        <td>

            <p class="title-icon form-label">VIA LOCATON {{$index + 1}}</p>

            <button style="bottom: -3px;" class="transparent position pull-right" ng-click="removeViaPoint($index)">
                <img src="images/icons/close-14.png">
            </button>

            <input class="form" id="drop-off" type="text" value="{{x}}" ng-model="item.val">

        </td>
    </tr>
</table>

<button class="add" ng-click="addViaPoint()">+ ADD MORE LOCATIONS</button>
<button class="okay okay-full">OKAY</button>



//Angular


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

//Via Point Objects


$scope.viaPoints = [

{val:"Hanoi"}

]

//Push Via Points

$scope.addViaPoint = function () {
    $scope.viaPoints.push("val:''");
}

//Remove Via Point

$scope.removeViaPoint = function (x) {
    $scope.viaPoints.splice(x, 1);
}

});

Answer 1

制作

$scope.addViaPoint = function () {
  $scope.viaPoints.push("val:''");
}

只会让你在数组中添加一个字符串。如果要添加对象，只需编写

即可

$scope.addViaPoint = function () {
  $scope.viaPoints.push({val:''});
}

您现在正在添加一个新对象，其属性val设置为''

至于不允许超过5个点，你可以在你的函数上创建一个逻辑门，如：

if ($scope.viaPoints.length === 5) return;

或者您可以选择更加用户友好的deactivating the button方式，具体取决于该长度，例如：

<button class="add"
        ng-click="addViaPoint()"
        ng-disabled="$scope.viaPoints.length === 5">
  + ADD MORE LOCATIONS
</button>

（尽管您应该使用类似reachedMaxViaPoints()）

等功能的更灵活的方法

如何使用AngularJS将新项目推送到对象数组中？

1 个答案: