啓用/禁用基於輸入驗證的按鈕

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