Question

我想使用ng-click添加两个新的选择框（from和until）然后添加然后更新我的范围中的用户选择。我可以添加选择框，但是我无法将选择绑定到我的阵列。

我的HTML：

<div ng-repeat="time in availability.times" class="calendar--availability--time">
    <select ng-model="availability.times.time.from[$index]">
     <option>...</option>
    </select>
    <select ng-model="availability.times.time.to[$index]">
     <option>...</option>
    </select>
</div>
<button class="button--secondary margin__top" ng-click="addNewTime()"><span>Add another slot</span></button>

我的js / angular：

$scope.availability = {
    times: [
        time: {from: '09:00', to: '21:00'}
    ]
}

$scope.addNewTime = function() {

    var newTime = {time: { from: '', until: ''}};
    $scope.availability.times.push(newTime);

}

Answer 1

HTML标记和JavaScript代码都有几个问题。

time名称不属于数组括号内。您似乎并不需要time名称，仅from和to。所以这个：

times: [
    time: {from: '09:00', to: '21:00'}
]

应该是这样的：

times: [
    {from: '09:00', to: '21:00'}
]

然后您需要在addNewTime函数中反映这一点，并纠正错字。你在哪里：

var newTime = {time: { from: '', until: ''}};

应该是：

var newTime = {from: '', to: ''};

（请注意，您有until而不是to）。

对于HTML中的ng-model绑定，无需使用$index变量引用完整模型。您只需要time创建的ng-repeat变量。所以不要这样：

<select ng-model="availability.times.time.from[$index]">

你应该有这个：

<select ng-model="time.from">

这是一个小提琴，显示一切正常：http://jsfiddle.net/etnfwdw7/。

最后，您应该熟悉大多数浏览器中内置的开发人员工具。其中一些错误会出现在开发者控制台中。

添加新选择然后以角度添加选择到数组

1 个答案: