输入类型[file] 不显示文件名。 Angularjs答案

【问题标题】：Input type[file] doesnot display the name of the file. Angularjs输入类型[file] 不显示文件名。 Angularjs
【发布时间】：2015-10-23 20:59:00
【问题描述】：

我是 angularjs 的新手。该项目正在从 jquery 过渡到 angular。最初，所有新术语和可怕的话题都是一场噩梦。我现在已经习惯了，并且实际上很喜欢在 Angular 上工作。

我被困在一个部分，我希望有人可以在这里帮助我或建议我。请参考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 次之后，它不应该让我再添加任何内容。有人可以在这里建议吗？？

【问题讨论】：

标签： javascript angularjs file

【解决方案1】：

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

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

在你的控制器中

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

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

在此处查看更新的小提琴：http://jsfiddle.net/kk1s3a1d/15/

【讨论】：

@curiousgeek- 这很酷。我在想我是否必须在添加按钮上进行两次 ng-clicks 调用。一个用于添加详细信息，另一个用于跟踪用户按下的次数。你做得很好。谢谢
@curiousgeek- 我有一个小疑问。只有当用户选择了所有三个选项时，单击按钮才能单击。在当前情况下，无论选择什么字段，点击都有效。你有什么建议可以避免那部分吗？
我能想到的一种方法是将所有控件放在一个带有所需验证的表单中，并且只有在它有效时才启用你的点击按钮。
类似 ng-disabled = formFileUpload.$invalid || disableAdd ，其中 formFileUpload 是表单的名称

【解决方案2】：

这是你的问题的工作 jsfiddle

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)" />

【讨论】：