Включить/отключить кнопку, основанную на проверках входов

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

Два изменения, необходимые для вашего кода для того, чтобы достичь того, чего вы хотите:

• Wrap $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*/ 
    } 
}