NG-REPEAT音频源由className选择

时间：2016-07-08 06:39:01

标签： angularjs audio angularjs-ng-repeat

单击mp3播放的图像时出现问题，但是当我对ng-repeat进行查询时，它不再起作用。

它来自getElementsByClassName索引，但我需要修复它。 是否有任何好的方法可以使它与角度一样工作，如ng-audio？ 

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

2 个答案:

答案 0 :(得分：0)

我修复了你的代码，这对我有用

<!DOCTYPE html>
<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', '$sce', function($scope, $sce) {

    		var arrayPL = document.getElementsByClassName("audio");

            $scope.playit = function(id){
                var audio = arrayPL[id];

	           if (audio.paused === false) {
	             audio.pause();
	           } else {
	             audio.play();
	           }
            }

            $scope.data=[{
                id: 0,
                categorie: ['Rectorat', 'General', 'Secretariate'],
                denumire: 'Rectorat',
                imagine: 'https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png',
                linkAudio: "http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
                descriereText: 'Bd. Mamaia nr. 124, etaj 1...',
                linkHarta: ''
                },
                {
                id: 1,
                categorie: ['Juridic', 'General', 'Secretariate'],
                denumire: 'Juridic',
                imagine: 'https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png',
                linkAudio: "http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
                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: 'https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png',
                linkAudio: "http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
                descriereText: 'indicatii',
                linkHarta: ''
                },
                 {
                id: 3,
                categorie: ['Facultatea de Matematica si Informatica', 'Secretariate'],
                denumire: 'Secretariat Facultatea de Matematica si Informatica',
                imagine: 'https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png',
                linkAudio: "http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
                descriereText: 'indicatii',
                linkHarta: ''
                }];

                $scope.trustURL = function (url) {
                	return $sce.trustAsResourceUrl(url);
                }
    }]);

    </script>
    <style>
        .col-xs-12 {
            padding-bottom:10px;
        }
        .col-sm-6 {
            padding-bottom:10px;
        }
        .centrat {
            margin: auto;
        }
        .img-responsive {
          width: 100px;
        }
    </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">
            </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="{{trustURL(locatie.imagine)}}" ng-click="playit(locatie.id)">
                        <audio class="audio" ng-src="{{trustURL(locatie.linkAudio)}}" ></audio>
                    <p style="font-size: 10px;">{{locatie.denumire}} | 
                    {{locatie.descriereText}}</p>
                </div>
            </div>
        </div>
    </div>

 </body>
</html>

答案 1 :(得分：0)

备注：

  1. 您需要使用$sce.trustAsResourceUrl，然后才能使用想象和 linkAudio ;

  2. 要按categories过滤音频，您不需要自定义过滤器，只需在其中执行深层数组过滤，如下所示：

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" ng-repeat="locatie in data | filter: { categories: search }">

    3. 这是一个代码片段：

    (function() {
  "use strict";
  angular.module('app', [])
   .controller('mainCtrl', function($scope, $sce) {
      var audioItems = document.getElementsByClassName("audio");
  
      $scope.play = function(locatie) {
        var audio = audioItems[locatie.id];
  
        if (!audio.paused) {
          audio.pause();
        } else {
          audio.play();
        }
      }
  
      $scope.data = [  
         {  
            "id":0,
            "categories":[  
               "Rectorat",
               "General",
               "Secretariate"
            ],
            "denumire":"Rectorat",
            "imagine":"https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png",
            "linkAudio":"http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
            "descriereText":"Bd. Mamaia nr. 124, etaj 1...",
            "linkHarta":""
         },
         {  
            "id":1,
            "categories":[  
               "Juridic",
               "General",
               "Secretariate"
            ],
            "denumire":"Juridic",
            "imagine":"https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png",
            "linkAudio":"http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
            "descriereText":"Bd. Mamaia nr. 124, etaj 1...",
            "linkHarta":""
         },
         {  
            "id":2,
            "categories":[  
               "Facultatea de Matematica si Informatica",
               "Secretariate"
            ],
            "denumire":"Secretariat Facultatea de Matematica si Informatica",
            "imagine":"https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png",
            "linkAudio":"http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
            "descriereText":"indicatii",
            "linkHarta":""
         },
         {  
            "id":3,
            "categories":[  
               "Facultatea de Matematica si Informatica",
               "Secretariate"
            ],
            "denumire":"Secretariat Facultatea de Matematica si Informatica",
            "imagine":"https://cdn2.iconfinder.com/data/icons/web-interface-icons/66/Img-512.png",
            "linkAudio":"http://muz-tv.ru/audio/a/3/a38b663b5b2a98220266a56529ae75de.mp3?id=843",
            "descriereText":"indicatii",
            "linkHarta":""
         }
      ];
  
      // You can use map to set all your url items to be trusted, as follows:
      $scope.data.map(function(value) {
        value.imagine = $sce.trustAsResourceUrl(value.imagine);
        value.linkAudio = $sce.trustAsResourceUrl(value.linkAudio);
      })
  });
})();
    .col-xs-12 {
  padding-bottom: 10px;
}

.col-sm-6 {
  padding-bottom: 10px;
}

.centrat {
  margin: auto;
}
    <!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body ng-cloak ng-controller="mainCtrl">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <img src="http://a5.mzstatic.com/us/r30/Purple/v4/8d/42/72/8d427222-6310-a43f-5d79-13c3a24c0ce5/icon128-2x.png" class="centrat img-responsive">
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12" style="padding-bottom: 20px;">
        <input type="textarea" class="form-control" ng-model="search" placeholder="Filter" 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: { categories: search }">
        <div>
          <img class="img-responsive" ng-src="{{locatie.imagine}}" ng-click="play(locatie)">
          <audio class="audio" ng-src="{{locatie.linkAudio}}"></audio>
          <p style="font-size: 10px;" ng-bind="locatie.denumire +  ' | ' + locatie.descriereText">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

相关问题
最新问题