Expression: Watch Assignment

by dtjohnson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<input type="text" placeholder="filter" ng-model="nameFilter" />
<br /><br />

<div ng-repeat="item in filteredItems">
    <input type="checkbox" ng-model="item.isChecked" />
    {{item.name}}
</div>
<br />

<div>Total Items: {{items.length}}</div>
<div>Filtered Items: {{filteredItems.length}}</div>
<div>Checked Items: {{checkedItems.length}}</div>
<br />

<button ng-click="showCheckedItems()">Show Checked Items</button>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller("myCtrl", function ($scope, $window) {
    $scope.items = [
        { name: "apple" },
        { name: "peach" },
        { name: "pear" },
        { name: "plum" }
    ];
    
$scope.$watch(function () {
    $scope.filteredItems = $scope.$eval("items | filter:{ name: nameFilter }");
    $scope.checkedItems = $scope.$eval("items | filter:{ name: nameFilter, isChecked: true }");
});
    
    $scope.showCheckedItems = function () {
        var checkedNames = $scope.checkedItems.map(function (item) {
            return item.name;
        });
        
        $window.alert(checkedNames);
    };
});