Javascript 根据输入启用/禁用按钮'；验证

我有这把剑。有人能帮我一下吗。

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>

我希望添加按钮仅在用户选择所有输入时激活。i、 e.选择文件并选择下拉值

---

目前它不检查验证。无论选择哪三个选项，它都会继续添加。我希望它只在三个输入都被选中时添加。感谢您的帮助

为了实现您的目标，需要对代码进行两项更改：

• 在

  $scope.apply（）

  中包装

  $scope.activeItem

  ，使页面了解对文件输入的更改
• 在

  ng disabled

  语句中检查表单的状态

进一步改进：

• 将项目初始化为

  []

  ，而不是

  [{}]

建议的解决方案

jsfiddle：

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

---

编写一个需要ngModel的指令，然后使用unshift方法根据您的条件将一个有效性变量设置为valid/invalid。。每次调用unshift模型changes@vinayakj-谢谢你的指导。你可以写一个if条件ng disable=truel if（所有三个ng模型！=null）{ng disable=false；}@mohammadjavadseyeyedi-你有没有一个与你提到的类似的例子？我试图以类似的方式禁用按钮。。

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*/
}
}

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

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*/
    }
}