How to control the view based on the value selected from drop down in AngularJs?

Question

My Json data is :

[{
    "objective": "My obj",
    "score": 9,
    "status": "active",
    "quarter": "Q1",
    "year": "2015",
    "team": "A",
    "owner_ids": [
        "175323"
    ],
    "key_results": [{
        "result": "resut11",
        "status": "Pending"
    }, {
        "result": "result12",
        "status": "On time"
    }]
}, {
    "objective": "My second obj",
    "score": 5,
    "status": "active",
    "quarter": "Q2",
    "year": "2015",
    "team": "B",
    "owner_ids": [
        "175223"
    ],
    "key_results": [{
        "result": "resut21",
        "status": "Pending"
    }, {
        "result": "result22",
        "status": "On time"
    }]
}, {
    "objective": "My third objective",
    "score": 3,
    "status": "active",
    "quarter": "Q3",
    "year": "2015",
    "team": "C",
    "owner_ids": [
        "15323"
    ],
    "key_results": [{
        "result": "resut31",
        "status": "Pending"
    }, {
        "result": "result12",
        "status": "Pending"
    }]
}, {
    "objective": "My fourth objective",
    "score": 3,
    "status": "active",
    "quarter": "Q2",
    "year": "2015",
    "team": "A",
    "owner_ids": [
        "17598"
    ],
    "key_results": [{
        "result": "resut41",
        "status": "Pending"
    }, {
        "result": "result42",
        "status": "On time"
    }]
}, {
    "objective": "My fifth objective",
    "score": 5,
    "status": "active",
    "quarter": "Q3",
    "year": "2016",
    "team": "B",
    "owner_ids": [
        "13298"
    ],
    "key_results": [{
        "result": "resut51",
        "status": "Pending"
    }, {
        "result": "result52",
        "status": "On time"
    }]
}, {
    "objective": "My sixth objective",
    "score": 7,
    "status": "active",
    "quarter": "Q4",
    "year": "2015",
    "team": "B",
    "owner_ids": [
        "1328"
    ],
    "key_results": [{
        "result": "resut61",
        "status": "Pending"
    }, {
        "result": "result62",
        "status": "On time"
    }]
}, {
    "objective": "My seventh objective",
    "score": 7,
    "status": "active",
    "quarter": "Q3",
    "year": "2015",
    "team": "B",
    "owner_ids": [
        "1328"
    ],
    "key_results": [{
        "result": "resut71",
        "status": "Pending"
    }, {
        "result": "result72",
        "status": "On time"
    }]
}]

In my view I am displaying the data in table as well as calculating the average of the final score.

I am able to display and average all the data, Now I need to filter teh data based on the year and then quarter.

View Page :

<h3>Overall Score: {{calculateAverage(xyz)}}</h3>

<tbody>
    <tr ng-repeat="entries in xyz">
        <td>{{$index + 1}} </td>
        <td>{{entries.objective}}</td>
        <td>{{entries.key_results[0].result}}</td>
        <td ng-class="{'text-success': entries.key_results[0].status == 'Pending', 'text-danger': entries.key_results[0].status == 'On time' }">
            {{entries.key_results[0].status}}
        </td>
        <td>{{entries.final_score}}</td>
        <td>{{entries.owner_ids[0]}}</td>
        <td>
            <a class="btn btn-sm btn-success" ng-click="/#/mypage/{{entries.owner_ids[0]}}"> View It </a>
        </td>
    </tr>
</tbody>

controller:

$scope.xyz = myservice.query();

$scope.calculateAverage = function (MyData) {
    //console.log(MyData);
    var sum = 0;
    for (var i = 0; i < MyData.length; i++) {
        var sum = sum + MyData[i].final_score;
    }
    var avg = sum / (MyData.length);
    //console.log(avg);

    return avg.toFixed(2);
};

There are other displays based on this over all data.

I have Implemented the drop down box

<div class="col-lg-3">
    <h4>Year:</h4>
    <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px">
        <option>2015</option>
    </select>
</div>
<div class="col-lg-3">
    <h4>Quarter:</h4>
    <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px">
        <option>Q3</option>
        <options>Q4</options>
    </select>
</div>

It should display the distinct year as well as distinct month and on selection can it filter the json data and can the rest of the view be changed which is based on this overall data depending of the selected value from drop down? Like changing the quarter to Q3 or year to 2015, the display in table and the average also changes accordingly , there are many dependent in view page on the overall data, this filter is just introduced, I do not want to change the various functions if the data scope can be changed based on dropdown select, looking for approach to accomplish this?

Answer 1

You can use Angular's filters to filter your data. You can also store your filtered results in scope variable and your original data remains intact. You need to add models to the select elements you are using as filters as shown:

        <div class="col-lg-3">
             <h4>Year:</h4>

            <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px" ng-model="yearFilter">
                <option value="2015">2015</option>
                <option value="2016">2016</option>
            </select>
        </div>
        <div class="col-lg-3">
             <h4>Quarter:</h4>

            <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px" ng-model="quarterFilter">
                <option value="Q3">Q3</option>
                <option value="Q4">Q4</option>
            </select>
        </div>

The filters should be applied as shown:

<tr ng-repeat="entries in filteredObjects=(xyz|filter:{'year':yearFilter,'quarter':quarterFilter})">

Now you can use the filteredObjects scope variable anywhere in that controller and will contain only the filtered data, without changing your original data. Check out one simple example implementation based off of your code in this jsFiddle.