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事件

来实现

#include <iostream>

class Executor
{
public:
  void perform(void (*routine)())
  {
    start();
    routine();
    stop();
  }

  void start() { std::cout << "start" << std::endl; }
  void stop() { std::cout << "stop" << std::endl; }
};

int main()
{
  Executor executor;
  executor.perform([](){
      std::cout << "perform 0" << std::endl;
    });
  executor.perform([](){
      std::cout << "perform 1" << std::endl;
      Executor executor;
      executor.perform([](){
          std::cout << "perform 10" << std::endl;
        });
    });
}

并在您的控制器中

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

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

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

Answer 2

这是你问题的工作方式

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

输入类型[文件]不显示文件的名称。 Angularjs

2 个答案: