Question

我有这个jsfiddle。有人可以帮我这个。 http://jsfiddle.net/ash12/kk1s3a1d/27/

HTML代码

<div ng-controller="ListController"><br>
    &emsp;File:                 
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    &emsp;&emsp;Name:&emsp;&emsp;&emsp;
    &emsp;&emsp;City:<br/>

    <input type='file' onchange="angular.element(this).scope().fileNameChanged(this)">
    <select name="singleSelect" ng-model="activeItem.content">
          <option  value="" disabled="" selected="" style="display:none;">Select Name</option>
          <option>Rob</option>
          <option>Dilan</option>
    </select>
     <select name="singleSelect1" ng-model="activeItem.content1">
          <option value="" disabled="" selected="" style="display:none;">Select City</option>
          <option>China</option>
          <option>Korea</option>
          <option>United States</option> 
    </select>   
    <button ng-click="addItem()" ng-disabled="disableAdd">+</button><br><br><br><br>
     List:
    <ul>
        <li ng-repeat="item in items">&emsp;&emsp;<a>{{item.name}}</a>&emsp;&emsp;&emsp;&emsp;<a>{{item.content}}</a>
            &emsp;&emsp;&emsp;&emsp;&emsp;<a>{{item.content1}}</a>
        </li>
    </ul>
</div>

JS代码。

function ListController($scope) {
$scope.items = [{
    }];

$scope.activeItem = {
    name: '',
    content: '',
    content1:''
}

$scope.fileNameChanged = function(el){
    $scope.activeItem.name = el.files[0].name
}

$scope.addItem = function () {
    $scope.items.push($scope.activeItem);
    if($scope.items.length > 6)
    {
        $scope.disableAdd = true
    }
    $scope.activeItem = {} /* reset active item*/
}
}

我希望仅当用户选择所有输入时才激活“添加”按钮。即选择文件并选择下拉值。

目前它不会检查验证。无论选择哪三个选项中的任何一个，它都会不断添加。我希望它只在选择了所有三个输入时添加。任何帮助表示赞赏。

Answer 1

为了达到您的目的，您的代码需要进行两项更改：

在$scope.activeItem中换行$scope.apply()，让页面知道文件输入的更改。
在ng-disabled声明中检查表单的状态。

进一步改进：

将项目初始化为[]而不是[{}]。

建议的解决方案

jsfiddle：https://jsfiddle.net/bfrola/1z5eejqx/6/

HTML代码（仅限按钮元素更改）：

<button ng-click="addItem()" ng-disabled="isButtonAddDisabled()">+</button>

JS代码：

function ListController($scope) {    
    $scope.items = [];
    $scope.activeItem = {
        name: '',
        content: '',
        content1:''
    }
    $scope.fileNameChanged = function(el){
        $scope.$apply(function () {
            $scope.activeItem.name = el.files[0].name;
        });
    }
    $scope.isButtonAddDisabled = function() {  
        // Make sure the selection is complete
        if (!$scope.activeItem.name ||
            !$scope.activeItem.content ||
            !$scope.activeItem.content1) {
            return true;
        }
        // Not to many items
        if ($scope.items.length > 6)
        {
            return true;
        }
        // All ok, not disabled
        return false;
    }
    $scope.addItem = function () {
        // Add here further form validations ...
        $scope.items.push($scope.activeItem);
        $scope.activeItem = {}; /* reset active item*/
    }
}

根据输入启用/禁用按钮＆＃39;验证

1 个答案: