我的范围变量在html视图中不会更新

时间:2014-03-18 11:36:53

标签: javascript html angularjs angularjs-scope

这是我的angularjs代码:

$scope.attachments = [];

$scope.uploadFile = function(files){
   for(var i=0; i<files.length; i++){
     $scope.attachments.push(files[i]);
     console.log($scope.attachments.length);
   }
};        

这是html代码:

<input multiple ng-class="{true:'btn btn-success', false:'btn btn-danger'
[fileUploadedStatus]" style="width:15em" type="file" name="file"
onchange="angular.element(this).scope().uploadFile(this.files)"/>


    {{attachments.length}}
    <ul>
        <li ng-repeat="attachment in attachments">
            attachment: {{attachment.name}}
        </li>
    </ul>

我正在尝试列出所有文件。但是$ scope.attachments变量不会更新,我可以在控制台日志中看到attachments.length得到的1和2等等,但在页面上它始终是0。 / p>

2 个答案:

答案 0 :(得分:1)

试试这样:

$scope.uploadFile = function(files){
  $scope.$apply(function(){
     for(var i=0; i<files.length; i++){
        $scope.attachments.push(files[i]);
        console.log($scope.attachments.length);
     }
  });
};

答案 1 :(得分:1)

工作plunkr:http://plnkr.co/edit/mrL1SgMV7DTEEdBg54Rm?p=preview

<强> HTML:            

  <br/>Attachments: {{attachments.length}} {{dummy}}
  <ul>
    <li ng-repeat="attachment in attachments">
      attachment: {{attachment.name}}
    </li>
  </ul>
</body>

<强> JS:

angular.module('app', []).controller('AppCtrl', function($scope) {
  $scope.attachments = [];

  $scope.uploadFile = function(element) {
    $scope.$apply(function(scope) {
      for (var i = 0; i < element.files.length; i++) {
        scope.attachments.push(element.files[i]);
      }
    })
  };

})

原始讨论:AngularJs: How to check for changes in file input fields?

$ scope。$ apply因onchange事件而被使用。但是,不确定为什么ng-change在这种情况下不起作用?