Gaurav Mehta Gaurav Mehta - 5 months ago 11
AngularJS Question

Filter videos to be displayed on the basis of a property in json in angularJs

I have 4 buttons in my html code. On click of each button, I want the videos to get filtered on the basis of "type" value in the json.
Here is the code:

<div class="btn-group hidden-xs" id = "selectBtns">
<button ng-repeat = "button in buttons" type="button" class="btn btn-default" ng-model = "selectedButton" ng-class="{focused: isFocused($index+1)}" ng-click="selectButton($index+1)">{{button.value}}</button>
</div>


The div which displays the image:

<div ng-repeat = "videos in src | filter :{type: selectedButton}" class="col-sm-4 onlineVideos">
<video controls>
<source src={{videos.src}} type="video/mp4">
</video>


The json:

"source":
[
{
"src" : "videos/study.mp4",
"type" : "Development"
},
{
"src" : "videos/study.mp4",
"type" : "Development"
},
{
"src" : "videos/study.mp4",
"type" : "Development"
},
{
"src" : "videos/study.mp4",
"type" : "Designing"
},
{
"src" : "videos/study.mp4",
"type" : "Designing"
},
{
"src" : "videos/study.mp4",
"type" : "Designing"
},
{
"src" : "videos/study.mp4",
"type" : "Tools"
},
{
"src" : "videos/study.mp4",
"type" : "Tools"
},
{
"src" : "videos/study.mp4",
"type" : "Tools"
}
]

Answer

<button> element does not support ng-model (see https://docs.angularjs.org/api/ng/directive/ngModel). You can either use a select element or use ng-click to update the model.

View

<button ng-repeat="button in buttons" type="button" class="btn btn-default" ng-class="{focused: isFocused($index+1)}" ng-click="selectButton(button)">{{button.value}}</button>

Controller

$scope.selectButton = function(button) {
    $scope.selectedButton = button.value;
};
Comments