Динамический флажок фильтра угловых js манипулирует отфильтрованными элементами

Question

Как манипулировать отфильтрованными элементами?

Например, если я выберу Red. Должен отображаться как показано ниже

Value:10(5+5) Apple,Strawberry

Ниже приведен мой код, который я сделал, поэтому, пожалуйста, предложите какое-нибудь решение здесь.

'use strict'

angular.module('fruit', []);

function FruitCtrl($scope) {
    $scope.fruit = [
        {'name': 'Apple', 'colour': 'Red','value':5},
         {'name': 'Strawberry', 'colour': 'Red','value':5},
        {'name': 'Orange', 'colour': 'Orange','value':5},
        {'name': 'Orange1', 'colour': 'Orange','value':5},
        {'name': 'Banana', 'colour': 'Yellow','value':5},
          {'name': 'Banana1', 'colour': 'Yellow','value':5}];
    
    $scope.colourIncludes = [];
    
    $scope.includeColour = function(colour) {
        var i = $.inArray(colour, $scope.colourIncludes);
        if (i > -1) {
            $scope.colourIncludes.splice(i, 1);
        } else {
            $scope.colourIncludes.push(colour);
        }
    }
    
    $scope.colourFilter = function(fruit) {
        if ($scope.colourIncludes.length > 0) {
            if ($.inArray(fruit.colour, $scope.colourIncludes) < 0)
                return;
        }
        
        return fruit;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="fruit">
    <div ng-controller="FruitCtrl">
        
        <input type="checkbox" ng-click="includeColour('Red')"/> Red</br/>
        <input type="checkbox" ng-click="includeColour('Orange')"/> Orange</br/>
        <input type="checkbox" ng-click="includeColour('Yellow')"/> Yellow</br/>
        
        <ul>
            <li ng-repeat="f in fruit | filter:colourFilter">
                {{f.name}}
            </li>
        </ul>

        Filter dump: {{colourIncludes}}
    </div>
</div>

Заранее спасибо

Answer 1

Создайте функцию в вашем контроллере, в которой вы вычисляете общую стоимость продуктов, выбранных с использованием состояния флажка, и привязываете ее к html.