Question

<body ng-controller="StockController as stockCtrl">
    <div ng-repeat="obj in stockCtrl.stocks" class="stock">
      <h1 class="text-center">{{obj.resource.fields.symbol}}</h1>
      <h1 class="text-center">{{obj.resource.fields.price | currency }}</h1>
      <div class="row">
        <input type="text" class="form-control target-price" ng-model="stock.high">
        <button class="btn btn-primary">Watch</button>
        <input type="text" class="form-control target-price" ng-model="stock.low">
        {{stock}}
      </div>
    </div>
  </body>

控制器

function StockController($http, $interval){
  var stockCtrl = this;
  stockCtrl.stocks = [];

  $interval(function(){
    $http.jsonp('http://finance.yahoo.com/webservice/v1/symbols/APPL/quote?format=json&callback=JSON_CALLBACK')
    .success(function(data){
        stockCtrl.stocks = data.list.resources;
      });
  },2000);

}

这里每隔一秒Ajax从REST中提取数据并将结果放入数组中。我使用ng-repeat循环遍历该数组，以在视图上显示这些值。我在ng-repeat中有另外两个ng-model值。当ng-repeat重新渲染视图时，它也会清除其他ng模型值（在这种情况下为“high”和“low”）。为什么会这样。如何防止这种情况？

这是sceneria：Ajax拉动了多个股票。我将为每只股票设置不同的高值和低值，因为我想在特定股票达到高点或低点时卖出。所以我希望那些高点和低点留在那里为每个股票。只有股票价格会发生变化终极我将把该股票对象的观察者写入当前股票价格的高低

Answer 1

在这里猜测，您的high and low不是对象和纯本地variables，因此它会在ng-repeat上迷失，因为它会创建新范围并重新呈现视图。

<body ng-controller="StockController as stockCtrl">
    <div ng-repeat="obj in stockCtrl.stocks" class="stock">
      <h1 class="text-center">{{obj.resource.fields.symbol}}</h1>
      <h1 class="text-center">{{obj.resource.fields.price | currency }}</h1>
      <div class="row">
        <input type="text" class="form-control target-price" ng-model="high">
        <button class="btn btn-primary">Watch</button>
        <input type="text" class="form-control target-price" ng-model="low">
        {{high}}
      </div>
    </div>
  </body>

您可以通过更改this.high and this.low来解决此问题，如下所示：

this.someObject = {};
this.someObject.high = "somevalue";
this.someObject.low = "somevalue";

Answer 2

看起来好像发生了一些事情：首先，每次渲染页面时都要清除高低模型，因为它们没有在控制器内部放置占位符。为此，我将从双向绑定切换并执行单向绑定，以便保存值或至少在控制器中创建占位符。其次，您将每个重复的库存实例的高低绑定。如果它还没有，那将来会给你带来麻烦。

Answer 3

每当发出新的AJAX请求时，

ng-repeat将加载其中的所有数据，该请求以ng-repeat更新主阵列

您可能需要执行以下操作：

1）将ng-model值链接到ng-repeat数组本身

ng-model="obj.low"
ng-model="obj.high"

2）然后在每次更改时（您可以使用ng-change（）等）在本地存储数组，以防您未将其提交到后端。使用$ sessionStorage.obj（比如说）

3）在每次使用AJAX调用的更新时，您需要检查$ sessionStorage是否具有高和低的值：

$interval(function(){
    $http.jsonp('http://finance.yahoo.com/webservice/v1/symbols/APPL/quote?format=json&callback=JSON_CALLBACK')
    .success(function(data){
        var response = data.list.resources;
        angular.forEach(response, function(item){

             angular.forEach($sessionStorage.obj, function(obj){

                if(item.low != obj.low){
                    item.low = obj.low
                }
                if(item.high != obj.high){
                    item.high = obj.high
                }
             });

        });

        stockCtrl.stocks = response;

      });
  },2000);

Answer 4

我的建议是使用每个自动收报机作为密钥保留一个单独的对象

$scope.myData={
    'MSFT': {high:54.25, low: 51.67},
    'AAPL': {high:99.26, low: 97.89}

}

然后在视图中：

<input type="text" class="form-control target-price" ng-model="myData[obj.symbol].high">

然后，您还可以将其存储在localStorage中，以便在页面加载之间保持持久性

Angular ng-repeat清除视图中的所有值

4 个答案: