AngularJS在ng-if上更改变量表单视图

Question

好的，我有一个基本变量。

$scope.categoryHeader = "";

我尝试按类别对列表进行分组。如何从视图更新变量？或者有更好的方法来实现这一目标吗？

<div ng-app="SharePointAngApp" class="row" style="color:white">
  <div ng-controller="spCustomerController">
    <ul ng-repeat="item in items">
      <div ng-if="item.Category.Title != categoryHeader" ng-change="categoryHeader = item.Category.Title">
        <h4>{{item.Category.Title}}</h4>
      </div> 
      <li>
        <a href="{{item.File.ServerRelativeUrl}}">{{item.Title}}</a>
      </li>
    </ul>
  </div>
</div>

实施例

组别

• ITEM1

• ITEM2

  类别2

• 项目3

*编辑

下面提供的解决方案是我问题的最佳和最简单的解决方案。另一篇文章的解决方案在我的页面范围内无效。

Answer 1

我会在ng-if上调用一个函数，这样我也可以根据我的条件在我的作用域变量中保留该值。你可以在$cope.categoryHeader返回false时保留它。

<div ng-app="app" ng-controller='ctrl'>
<div ng-repeat=" item in num"> 
    <div ng-if="display(item)" >  
        display this
    </div>
</div>
</div>

angular.module('app', [])
.controller('ctrl', function($scope) {
    $scope.num = [1,2,3];
    $scope.display = function(x) {
        if (x === 2) {  
            return true;
        } else {
            return false;
        }
    };
});

样本小提琴： http://jsfiddle.net/63raz38t/1/