AngularJS ng-bindがプッシュされた配列を更新しない理由

Question

文字列を配列にプッシュして表示し、ライブの更新を表示しようとしています。それは表現では動作していますが、ng-bindでは動作しません。理由を知るのを手伝ってください。

HTML：

<div ng-app=“app”> 
     <div ng-controller="testController"> 
      <div ng-bind="fruit"></div> 
      <div>{{fruit}}</div> 
      <button ng-click="add()">add</button> 
     </div> 
    </div> 

コントローラー：NGリピート

var app = angular.module('app', []); 

app.controller('testController', ['$scope', function($scope){ 
    $scope.fruit = ['apple']; 

    $scope.add = function() { 
     var a = 'banana'; 
     $scope.fruit.push(a); 
    }; 
}]); 

Answer 1

使用して、あなたの配列からすべての値を印刷する

var app = angular.module('app', []); 
 

 
app.controller('testController', ['$scope', function($scope){ 
 
    $scope.fruit = ['apple']; 
 

 
    $scope.add = function() { 
 
     var a = 'banana'; 
 
     $scope.fruit.push(a); 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
     <div ng-controller="testController"> 
 
      <div ng-bind="fruit"></div> 
 
      <div ng-repeat="item in fruit track by $index">{{item}}</div> 
 
      <button ng-click="add()">add</button> 
 
     </div> 
 
    </div>

Answer 2

ng-bindは、fruitの値を角度アプリのdigest外に変更するため、機能しません。

ng-bindの変数を更新するには、$scope.apply()を使用してください。

ng-repeatをsumit chauhanとして提案することもできます。

DEMO

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope, $interval) { 
 
    $scope.fruit = ['apple']; 
 

 
    $scope.add = function() { 
 
     var a = 'banana'; 
 
     $scope.fruit.push(a); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <button ng-click="add()">add</button> 
 
    <div ng-repeat="item in fruit track by $index"> 
 
    {{item}} 
 
    </div> 
 
</div>