範囲変更時のビューの更新

Question

同じ質問をしているかもしれませんが、正確な答えを見つけられませんでした。

<table class="striped responsive-table"> 
     <thead> 
      <tr> 
       <th data-field="id"> 
        <p> 
         <input type="checkbox" id="selectAll" ng-change="selectAll(curStatus)" ng-model="selectAllRecords"/> 
         <label for="selectAll">All</label> 
        </p> 
       </th> 
       <th>BASE TEMPLATE&</th> 
       <th>PROCESS ELEMENT </th> 
       <th>SCREEN NAME</th> 
       <th>Action</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr ng-repeat="record in records | orderBy:sortType:sortReverse | filter : searchItem track by $index"> 
      <td data-field="id"> 
       <p> 
        <input type="checkbox" id="{{record.id}}" ng-model="record.Selected"/> 
        <label for="{{record.id}}"></label> 
       </p> 
      </td> 
      <td>{{record.baseTemplate}}</td> 
      <td>{{record.processElement}}</td> 
      <td>{{record.screenName}}</td> 
      <td> 
       <i class="material-icons tooltipped" data-position="top" data-delay="50" data-tooltip="Edit Record">mode_edit</i> 
       <i class="material-icons tooltipped" data-position="top" data-delay="50" data-tooltip="Delete Record" style="color : #ee6e73">delete</i></td> 
      </tr> 
     </tbody> 
     </table> 

この

が私の見解である

コントローラは

$scope.sortType  = 'baseTemplate'; // set the default sort type 
$scope.sortReverse = false; 
$scope.selectAllRecords = false; 
$scope.records = [ 
    { 
     id : "record1", 
     baseTemplate : "A", 
     processElement : "PE1", 
     screenName : "normal view", 
    },{ 
     id : "record2", 
     baseTemplate : "B", 
     processElement : "PE2", 
     screenName : "detail view" 
    },{ 
     id : "record3", 
     baseTemplate : "C", 
     processElement : "PE3", 
     screenName : "list view" 
    } 
]; 
$scope.addNew = function(){ 
    var id = $scope.records.length + 1; 
    id = 'record' + id; 
    $scope.records.push({ 
     id : id, 
     baseTemplate : 'A', 
     processElement : 'PE5', 
     screenName : 'ACTION_BAR' 
    }); 
    console.log(JSON.stringify($scope.records)); 
}; 

で新しいレコードがscope.records $の中に追加したとき、私は変化を見ることができます。しかし、それは私の見解に反映されていません。

いずれのヘルプも素晴らしいサポートになります。

ありがとうございます。

Answer 1

あなたのコードは大丈夫です。私がしたのは、addNew関数を呼び出すボタンを追加することでした。新しい項目がビューに反映されます。

angular.module('app', []).controller('ctrl', function($scope) { 
 
    $scope.sortType = 'baseTemplate'; // set the default sort type 
 
    $scope.sortReverse = false; 
 
    $scope.selectAllRecords = false; 
 
    $scope.records = [{ 
 
    id: "record1", 
 
    baseTemplate: "A", 
 
    processElement: "PE1", 
 
    screenName: "normal view", 
 
    }, { 
 
    id: "record2", 
 
    baseTemplate: "B", 
 
    processElement: "PE2", 
 
    screenName: "detail view" 
 
    }, { 
 
    id: "record3", 
 
    baseTemplate: "C", 
 
    processElement: "PE3", 
 
    screenName: "list view" 
 
    }]; 
 
    $scope.addNew = function() { 
 
    var id = $scope.records.length + 1; 
 
    id = 'record' + id; 
 
    $scope.records.push({ 
 
     id: id, 
 
     baseTemplate: 'A', 
 
     processElement: 'PE5', 
 
     screenName: 'ACTION_BAR' 
 
    }); 
 
    console.log(JSON.stringify($scope.records)); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <table class="striped responsive-table"> 
 
    <thead> 
 
     <tr> 
 
     <th data-field="id"> 
 
      <p> 
 
      <input type="checkbox" id="selectAll" ng-change="selectAll(curStatus)" ng-model="selectAllRecords" /> 
 
      <label for="selectAll">All</label> 
 
      </p> 
 
     </th> 
 
     <th>BASE TEMPLATE&</th> 
 
     <th>PROCESS ELEMENT</th> 
 
     <th>SCREEN NAME</th> 
 
     <th>Action</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr ng-repeat="record in records | orderBy:sortType:sortReverse | filter : searchItem track by $index"> 
 
     <td data-field="id"> 
 
      <p> 
 
      <input type="checkbox" id="{{record.id}}" ng-model="record.Selected" /> 
 
      <label for="{{record.id}}"></label> 
 
      </p> 
 
     </td> 
 
     <td>{{record.baseTemplate}}</td> 
 
     <td>{{record.processElement}}</td> 
 
     <td>{{record.screenName}}</td> 
 
     <td> 
 
      <i class="material-icons tooltipped" data-position="top" data-delay="50" data-tooltip="Edit Record">mode_edit</i> 
 
      <i class="material-icons tooltipped" data-position="top" data-delay="50" data-tooltip="Delete Record" style="color : #ee6e73">delete</i> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <button ng-click="addNew()">add new</button> 
 
</div>