Angular js 使用 ng-repeat 监视 Select 标记上的对象数组答案

【问题标题】：Angular js watch on an Array of objects on a Select tag with ng-repeatAngular js 使用 ng-repeat 监视 Select 标记上的对象数组
【发布时间】：2016-02-24 01:32:03
【问题描述】：

我想用 ng-repeat 观看选择标签并禁用保存按钮。我有这样的设置。

最初我将有三个带有值的选择框，用户必须从三个框中选择至少一个选择值才能启用 Save btn
- 用户还可以添加更多选择框。

现在，如果我们有 5 个选择框，我如何查看选择框 - 如果没有选择框，我们如何查看所有选择框并启用/禁用保存按钮。

这是一个小提琴链接..类似于我的情况：@987654321@ 请帮帮我！！

【问题讨论】：

标签： javascript arrays angularjs ng-repeat

【解决方案1】：

好吧，您可以将所有选择放在一个表单中并根据需要进行设置。在按钮中，如果 de form 为 $invalid，则使 ng-disabled 标记有效。

例子：

<ng-form name="selectForm">
  <select class="form-control" ng-model="item.name" name="select" ng-required="true">
    <option>Select a campus</option>
    <option>Campus 1</option>
    <option>Campus 2</option>
    <option>Campus 3</option>        
  </select>
  <button type="submit" ng-disabled="selectForm.$invalid">Save</button>
</ng-form>

【讨论】：

实际上我正在尝试的场景已经在一个表单中，我在一个表格中使用 ng-repeat。再次在表格中，我有 4 列有四个选择标签，其中一个是强制性的. 你能帮我填写至少一个选择框，这样其他选择框就不需要填写了。
好吧，克里希纳。我认为您的解决方案是在 ng-model 中声明如下示例的列表：selectedItems ['campus' + $index]。并且，在控制器中，创建一个函数，在此数组中搜索您声明的键的任何值。如果有，则返回 true，否则返回 false。这将有助于禁用或不禁用按钮。

【解决方案2】：

您可以对所有ng-selects 使用相同的对象作为模型：

$scope.selectedValues = {};

然后ng-repeat 内的每个选择框将用作模型不同的对象属性：

<select class="form-control" ng-model="selectedValues['campus_' + $index]">
    <option>Select a campus</option>
    <option>Campus 1</option>
    <option>Campus 2</option>
    <option>Campus 3</option>        
</select>

要检查是否所有值都已填充，您将观察 selectedValues 以了解最后一个参数设置为 true 的变化：

$scope.$watch('selectedValues', function(newValue, oldValue) {
    // Check whether all values in $scope.selectedValues are filled
    var allFilled = true;
    angular.forEach($scope.selectedValues, function(value, key) {
        if (!value) {
            allFilled = false;
        }
    });

    if (allFilled) {
        // enable button
    } else {
        // disable button
    }
}, true);

最后一个参数true 是必不可少的，因为它告诉Angular 比较对象中的所有值。见https://docs.angularjs.org/api/ng/type/$rootScope.Scope。

【讨论】：

嗨马丁..你能帮我检查一下至少有一个选择框是否已填满..谢谢！
我更新了我的答案。如果它不起作用，请使用您的代码创建小提琴。
嗨 Martin.. 我写了一个 js fiddle jsfiddle.net/gq54mc56。在这里，我想启用\禁用保存按钮。一旦，用户点击添加另一个，说五次。我想检查至少一个选择元素是否具有从五个中选择的值。非常感谢！！