リフレッシュせずにDOM内で新しいデータを取得する

Question

時間範囲を追加するページがあります。INSERT & SAVEはデータをAPIに、レスポンスセットデータをテーブルに送信します。しかし、問題は、私のデータが動的に表示されていないことです。私は変更を見るためにリフレッシュページが必要です。私は$watchを使用しようとしていますが、これは動作しません。ここに私のplunkerです。

Answer 1

あなたは、いくつかのミスを犯した：全体のものを包んない

1. <div ng-controller="TimepickerDemoCtrl">
2. ng-submitはurbanTimeRangeとしてng-click
3. に変更されましたあなたは$watchCollection 代わりの$watch

外観を使用する必要があります配列です訂正時にvariant。

Answer 2

thnxから@Slava Utesinovへの出発点。これをどうやって作るのですか？ まず、新しい時間間隔を追加するには、$httpでこれを使用します。まず、私は$scopeに新しいデータをプッシュすると、私は変更

また

$scope.urbanTimeRange.push(data); 
$scope.$watchCollection('urbanTimeRange', function (newValue, oldValue, scope) { 
}, true); 

、この$scopeを$watchた後、私は時間間隔を削除すると、私はspliceメソッドを使用して、変更の後$watch。ここではindexが表示され、$indexとng-repeatで選択した項目を追跡する私のHTMLからindexが得られます。

これはコントローラです：

$scope.urbanTimeRange.splice(index, 1); 
$scope.$watchCollection('urbanTimeRange', function (newValue, oldValue, scope) { 
}); 

これは、HTML

<tr ng-repeat='timeRange in urbanTimeRange track by $index'> 
          <td>{{timeRange.from_time | date:'shortTime'}}</td> 
          <td>{{timeRange.to_time | date:'shortTime'}}</td> 
          <td><angular-smartconfirm confirm="removeRow(timeRange.id, $index)"><i class="fa fa-close"></i></angular-smartconfirm></td> 
         </tr>