Question

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

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

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

这是一个小提琴链接...与我的情况类似：Js fiddle 请帮帮我!!

Answer 1

您可以将同一个对象用作所有ng-select的模型：

$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。

Answer 2

好吧，您可以将所有选择放在表单中并根据需要进行设置。如果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>

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

2 个答案: