添加新选择然后将选择添加到角度数组答案

【问题标题】：Add new select then add selection to array in angular添加新选择然后将选择添加到角度数组
【发布时间】：2015-09-30 01:09:53
【问题描述】：

我想使用 ng-click 添加两个新的选择框（从和直到），然后添加然后更新我范围内的用户选择。我可以添加选择框，但无法将选择绑定到我的数组。

我的 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/角度：

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

$scope.addNewTime = function() {

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

}

【问题讨论】：

只创建指令

标签： javascript angularjs

【解决方案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 变量引用完整模型。您只需要由ng-repeat 创建的time 变量。所以不要这样：

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

你应该有这个：

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

这是一个显示所有工作的小提琴：http://jsfiddle.net/etnfwdw7/。

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

【讨论】：