输入类型[file]不显示文件名.Angularjs

Input type[file] doesnot display the name of the file. Angularjs

本文关键字：显示 显示文件 文件名 Angularjs 类型 file 输入      更新时间：2023-09-26

我刚接触angularjs。该项目正在从jquery过渡到angular。起初，所有的新术语和棘手的话题都是一场噩梦。我现在已经习惯了，而且很享受angular的工作。

我被困在一个部分，我希望有人能帮助我或建议我这里。请参考文件。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次。在加了第六次之后，应该不会再让我加了。有人能在这里提出建议吗?

您需要通过处理文件输入的onchange事件来做到这一点

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

和In your controller 

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

要禁用添加按钮，请在additem中检查条目数组的长度，并使用ng-disabled

禁用按钮

查看更新后的提琴在这里:http://jsfiddle.net/kk1s3a1d/15/

这是您的问题的工作概要

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

你需要像下面提到的那样使用onchange，因为ng-model和ng-change不能使用input type="file"

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