0
Ich habe ein Problem beim Klicken auf Bilder die mp3 abgespielt wird, aber wenn ich eine Abfrage auf ng-repeat mache, funktioniert es nicht mehr.NG-REPEAT Audioquelle Auswahl nach Klassenname
Es stammt aus dem getElementsByClassName-Index, aber ich muss es beheben. Gibt es einen guten Weg, um es mit eckigen wie ng-Audio arbeiten zu lassen?
<html>
<heaD>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-audio/1.7.2/angular.audio.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('controller', ['$scope', function($scope) {
$scope.playit = function(id){
var audio = document.getElementsByClassName("audio")[id];
audio.play();
}
$scope.data=[{
id: 0,
categorie: ['Rectorat', 'General', 'Secretariate'],
denumire: 'Rectorat',
imagine: '1-RECTORAT.jpg',
linkAudio: "audio/rectorat-notgood.mp3",
descriereText: 'Bd. Mamaia nr. 124, etaj 1...',
linkHarta: ''
},
{
id: 1,
categorie: ['Juridic', 'General', 'Secretariate'],
denumire: 'Juridic',
imagine: '1-RECTORAT.jpg',
linkAudio: "audio/rectorat-notgood.mp3",
descriereText: 'Bd. Mamaia nr. 124, etaj 1...',
linkHarta: ''
},
{
id: 2,
categorie: ['Facultatea de Matematica si Informatica', 'Secretariate'],
denumire: 'Secretariat Facultatea de Matematica si Informatica',
imagine: '1-RECTORAT.jpg',
linkAudio: "audio/rectorat-notgood.mp3",
descriereText: 'indicatii',
linkHarta: ''
},
{
id: 3,
categorie: ['Facultatea de Matematica si Informatica', 'Secretariate'],
denumire: 'Secretariat Facultatea de Matematica si Informatica',
imagine: '1-RECTORAT.jpg',
linkAudio: "audio/test.mp3",
descriereText: 'indicatii',
linkHarta: ''
}];
}]);
</script>
<style>
.col-xs-12 {
padding-bottom:10px;
}
.col-sm-6 {
padding-bottom:10px;
}
.centrat {
margin: auto;
}
</style>
</heaD>
<body ng-app="myApp" data-ng-cloak data-ng-controller="controller">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="img/logo-site.jpg" class="centrat img-responsive"></span>
</div>
</div>
<div class="row">
<div class="col-lg-12" style="padding-bottom: 20px;">
<input type="textarea" class="form-control" ng-model="query.categorie" placeholder="Cautare" style="width: 100%; height: 100px;">
</div>
</div>
<div class="row" >
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" ng-repeat="locatie in data | filter:query" >
<div >
<img class="img-responsive" ng-src="img/{{locatie.imagine}}" style="margin: auto;" ng-click="playit(locatie.id)">
<audio class="audio" ng-src="{{locatie.linkAudio}}" ></audio>
</img>
<p style="font-size: 10px;">{{locatie.denumire}} |
{{locatie.descriereText}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
Hallo, danke. Aber es funktioniert nicht, wenn Sie im Eingabefeld nach etwas suchen. –
Ich denke, Sie müssen benutzerdefinierte Suchfilter erstellen, Filter muss Elemente in Array "Kategorie" iterieren und Objekt zurückgeben –