Question

我正在尝试制作一个具有排序功能的表格以及一个用于选择要显示哪些列的按钮这些功能在单独使用时都有效，但在我尝试一起使用时会失败。

JS

＆＃13;

angular.module('test', []);

angular.module("test").controller("sessionCtrl", sessionCtrl);


function sessionCtrl() {
  var vm = this;
  vm.testvar= "HELLO";
  vm.sortType = 'name';
  vm.sortReverse = false;

  vm.columnVisiblity = {

    name: true,
    specification: true,
    type: true,
  };
  vm.TableData = [{

    name: "2017/03/01-14",
    specification: "IDB-idb-1wk",
    type: "Full"

  }, {

    name: "2017/03/01-17",
    specification: "Set-04",
    type: "Full"
  }, {
    name: "2017/03/04-11",
    specification: "IDB-idb-1wk",
    type: "Full"
  }];


}

＆＃13;

HTML

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-controller="sessionCtrl as vm">
  {{vm.testvar}}
  <table>
    <thead>
      <tr>

        <th ng-click="vm.sortType='name'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.name">NAME
        </th>
        <th ng-click="vm.sortType='specification'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.specification">SPECIFICATION
        </th>
        <th ng-click="vm.sortType='type'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.type">TYPE
        </th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="item in vm.TableData | orderBy:vm.sortType:vm.sortReverse">

        <td ng-if="vm.columnVisiblity.name">{{item.name}}</td>
        <td ng-if="vm.columnVisiblity.specification">{{item.specification}}</td>
        <td ng-if="vm.columnVisiblity.type">{{item.type}}</td>
      </tr>
    </tbody>

  </table>
  <a href="#" ng-model="vm.columnVisibility.name" ng-click="vm.columnVisiblity.name=!vm.columnVisiblity.name">TOGGLE NAME</a>

  <a href="#" ng-model="vm.columnVisibility.specification" ng-click="vm.columnVisiblity.specification=!vm.columnVisiblity.specification">TOGGLE SPECIFICATION</a>

  <a href="#" ng-model="vm.columnVisibility.type" ng-click="vm.columnVisiblity.type=!vm.columnVisiblity.type">TOGGLE TYPE</a>
</body>

＆＃13;

基本上我正在创建一个表，其列在columnVisibility对象的基础上可见。我使用orderby过滤器对表格进行排序。

Answer 1

问题是<a href="#" ng-model="vm.columnVisibility.name" ng-click="vm.columnVisibility.name=!vm.columnVisibility.name">TOGGLE NAME</a>此处columnVisibility的拼写与控制器中的拼写不匹配

 vm.columnVisiblity = {

    name: true,
    specification: true,
    type: true,
  };

这是一个打字错误，纠正拼写，它会起作用

演示：https://jsfiddle.net/m7a74L8f/

Answer 2

＆＃13;

angular.module('test', []);

angular.module("test").controller("sessionCtrl", sessionCtrl);


function sessionCtrl() {
  var vm = this;
  vm.testvar= "HELLO";
  vm.sortType = 'name';
  vm.sortReverse = false;

  vm.columnVisiblity = {

    name: true,
    specification: true,
    type: true,
  };
  vm.TableData = [{

    name: "2017/03/01-14",
    specification: "IDB-idb-1wk",
    type: "Full"

  }, {

    name: "2017/03/01-17",
    specification: "Set-04",
    type: "Full"
  }, {
    name: "2017/03/04-11",
    specification: "IDB-idb-1wk",
    type: "Full"
  }];


}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="sessionCtrl as vm">
  {{vm.testvar}}
  <table>
    <thead>
      <tr>

        <th ng-click="vm.sortType='name'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.name">NAME
        </th>
        <th ng-click="vm.sortType='specification'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.specification">SPECIFICATION
        </th>
        <th ng-click="vm.sortType='type'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.type">TYPE
        </th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="item in vm.TableData | orderBy:vm.sortType:vm.sortReverse">

        <td ng-if="vm.columnVisiblity.name">{{item.name}}</td>
        <td ng-if="vm.columnVisiblity.specification">{{item.specification}}</td>
        <td ng-if="vm.columnVisiblity.type">{{item.type}}</td>
      </tr>
    </tbody>

  </table>
  <a href="#" ng-model="vm.columnVisiblity.name" ng-click="vm.columnVisiblity.name=!vm.columnVisiblity.name">TOGGLE NAME</a>

  <a href="#" ng-model="vm.columnVisiblity.specification" ng-click="vm.columnVisiblity.specification=!vm.columnVisiblity.specification">TOGGLE SPECIFICATION</a>

  <a href="#" ng-model="vm.columnVisibility.type" ng-click="vm.columnVisiblity.type=!vm.columnVisiblity.type">TOGGLE TYPE</a>
</div>

＆＃13;

使用AngularJS中动态显示的列对表进行排序

2 个答案: