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>

范围更改时更新视图

1 个答案: