Тип ввода [файл] не отображает имя файла. Angularjs

Question

Я новичок в angularjs. Проект переходит от jquery к угловому. Первоначально это был кошмар со всеми новыми терминами и редкими темами. Я привык к этому сейчас и на самом деле наслаждаюсь работой на угловых.

Я застрял с одной стороны, и я надеюсь, что кто-то может мне помочь или предложить мне здесь. Пожалуйста, обратитесь к jsfiddle. http://jsfiddle.net/ash12/kk1s3a1d/12/

Вот й 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' ng-model="activeItem.name"> 
    <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()">+</button><br> 

    <ul> 
     <li ng-repeat="item in items">&emsp;&emsp;<a>{{item.name}}</a><a>{{item.content}}</a> 
      &emsp;&emsp;&emsp;&emsp;&emsp;<a>{{item.content1}}</a> 
     </li> 
    </ul> 
</div> 

Вот функция управления ...

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

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

$scope.addItem = function() { 
    $scope.items.push($scope.activeItem); 
    $scope.activeItem = {} /* reset active item*/ 
} 

} 

Здесь, если я выбрать имя файла, имя и город, затем нажмите кнопку «Добавить». Он показывает список ниже. Проблема в том, что он не показывает файл, который мы выбрали.

Может кто-нибудь, пожалуйста, скажите мне, что делать в этом случае? Кроме того, мне нужно, чтобы кнопка щелчка была активной только 6 раз. после добавления в 6-й раз он не должен позволять мне добавлять дальше. может кто-нибудь предложить здесь?

Answer 1

Вы должны сделать это путем обработки OnChange событие ввода файла

<input type='file' onchange="angular.element(this).scope().fileNameChanged(this)"> 

и в контроллере

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

Чтобы отключить кнопку добавления в чеке AddItem по длине ваш элемент массива и отключите кнопку с помощью ng-disabled

Просмотреть обновленную скрипку здесь: http://jsfiddle.net/kk1s3a1d/15/

Answer 2

здесь рабочий jsfiddle вашей проблемы

http://jsfiddle.net/adiioo7/fA968/

вам нужно использовать OnChange, как указано ниже в нг-модели и нг-изменения не работает с входной тип = «файл»

<input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage(event)" />