Filter Videos auf der Grundlage einer Eigenschaft in JSON in angularJs angezeigt werden

Question

Ich habe 4 Tasten in meinem HTML-Code. Wenn ich auf die einzelnen Schaltflächen klicke, möchte ich, dass die Videos auf der Grundlage des "type" -Werts im json gefiltert werden. Hier ist der 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> 

Das div, die das Bild zeigt:

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

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

<button> Element nicht ng-model unterstützt (siehe https://docs.angularjs.org/api/ng/directive/ngModel). Sie können entweder ein select Element verwenden oder ng-click verwenden, um das Modell zu aktualisieren.

Ansicht

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

Answer 2

ich Ihren Code ein wenig verändert und machte eine Geige: http://jsfiddle.net/Lvc0u55v/5769/

HTML

ng-click="selectButton(button)" 

Controller:

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