Question

我的html代码中有4个按钮。点击每个按钮，我希望根据＆＃34;类型＆＃34;过滤视频。在json中的价值。这是代码：

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

显示图像的div：

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

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>元素不支持ng-model（请参阅https://docs.angularjs.org/api/ng/directive/ngModel）。您可以使用select元素或使用ng-click更新模型。

查看

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

<强>控制器

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

Answer 2

我修改了你的代码并做了一个小提琴：http://jsfiddle.net/Lvc0u55v/5769/

HTML

ng-click="selectButton(button)"

控制器：

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

根据angularJs中json中的属性过滤要显示的视频

2 个答案: