启用/禁用基于输入验证的按钮

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