2016-06-12 12 views
0
<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> 

コントローラここ角度NGリピートすべてクリア値

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には2つの他のng-model値があります。ビューのレンダリングを繰り返しても、他のng-model値もクリアされます(この場合、「high」と「low」)。なぜこれが起こっているのですか?これを防ぐ方法は?

ここでは風景があります.Ajaxは複数の株を取得します。特定の株式が高値または低値に達したときに売りたいので、私は各株に対して異なる高値と低値を設定します。だから、私はそれらの高値と低値がそれぞれの株式のためにそこにとどまることを望みます。唯一の株価は、私がそのハイとロー

+1

「高」と「低」は何ですか? 'obj.high'や' obj.low'のようなものではないでしょうか?あなたは常に 'ng-model'にオブジェクトを持つという基本的なルールを破っています。プリミティブは継承を持たず、 'ng-repeat'は子スコープを作成します – charlietfl

+0

が更新されました。しかし、同じ問題 –

+0

@LokeshCherukuri:あなたはこのような何かを持っている.... this.stock = {}; this.stock.high = "somevalue"; this.stock.low = "somevalue"; – Thalaivar

答えて

0

そのここに推測して現在の株価にその株式オブジェクトのウォッチャーを書くつもりです Ultimateを変更するでしょう、あなたの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"; 
+0

しかし、私はそれぞれの株価に高い値と低い値が必要です。もしng-repeatに10個の株があるなら、10個の高い値と低い値が必要です –

+0

これらの値を$ localStorageに保存し、何かが既に存在するかどうかを確認してから再設定します。高い値と低い値のng-repeat値です。 – Thalaivar

+0

私はページを更新しません。だから私はローカルストレージが必要です。 –

0

それが起こっている物事のカップルのように見えます:最初、あなたはハイとローのモデルたびあなたをクリアしていますコントローラーの内部にプレースホルダーがないため、ページをレンダリングします。そのために私は双方向バインディングから切り替えて、値を保持するか、少なくともコントローラーにプレースホルダーを作成するように一方向バインディングを行います。第二に、繰り返されたストックインスタンスごとに高低をバインドしています。それは、もしそれがまだないなら、あなたの将来の問題を引き起こすでしょう。

1)リンク:

+0

在庫の変更でも高低を維持したいです。これらの値をテキストボックスに入力します。 –

+0

次に、個々の行の株価を株式オブジェクト配列と平行に保持するオブジェクトに切り替える必要があります。その問題は、RESTコールが常に同じエンティティを同じ順序で返すと仮定しているため、在庫ごとに変更されない一意の値に基づいて調整する必要があります – DanielC

0

ngのリピートは、新しいAJAX要求が行われるたびに、その中のすべてのデータがNGリピート

でメインアレイを更新するあなたは次の操作を実行する必要がありますロードしますNG-モデル値NGリピート配列自体に

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

2など)を各変化(もしNG変化を(使用できる)等)上であなたがそれを提出しない場合にローカルに配列を格納しますバックエンド。

$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); 
+0

OPごとに手動で値を入力しています –

+0

Ok ..編集した質問は私の悪い – charlietfl

0

私の提案は、別のを維持することです:使用$ sessionStorage.obj(例えば)

3)AJAX呼び出しを使用して、各updationで、あなたは$のsessionStorageのようにハイとローの値を持っているかどうかを確認する必要がありますキービューで次に

$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"> 

あなたは可能性もSTOページロード間の永続性のためにlocalStorageでこれを再実行する