AngularJS change variable form view on ng-if

Question

Ok, so I have a basic variable.

$scope.categoryHeader = "";

I'm trying to group lists by their category. How do I update the variable from the view? Or is there a better way to accomplish this?

<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>

Example

Category1

item1
item2

Category2
item3

*Edit

The solution provided below is the best and simplest solution to my question. The other post's solution did not work within the confines of my page.

`ng-change` doesn't make sense on a `div` element, since it is designed to monitor for a change to an HTML `input` element, and a `div` is not an `input`. — Claies, Oct 12 '16 at 20:33
anyway, this has already been discussed at length here: http://stackoverflow.com/questions/19992090/angularjs-group-by-directive-without-external-dependencies — Claies, Oct 12 '16 at 20:37

score 0 · Accepted Answer · answered Oct 12 '16 at 20:27

I would call a function on ng-if, so that i can persist the value too in my scope variable too based on my condition. you could persist your $cope.categoryHeader when it returns 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;
        }
    };
});

A sample fiddle: http://jsfiddle.net/63raz38t/1/

AngularJS change variable form view on ng-if

Example

Category1

Category2

*Edit

1 Answers1