Question

我试图在Angular后端操纵HTML5的音频元素。（我自己不是开发者）

使用Angular过滤器或$ key的任何变通方法，我想通过单词。$ key搜索，而不是通过属性'value'搜索。

var app = angular.module("app", ['angular.filter']);

app.controller("myCtrl", function($scope) {

  $scope.words = {
    'art': [{
      'value': 'art',
      'lang': 'english'
    }],
    'lamp': [{
      'value': 'lamp',
      'lang': 'english'
    }, {
      'value': 'lámpara',
      'lang': 'espanol'
    }],
    'window': [{
      'value': 'window',
      'lang': 'english'
    }, {
      'value': 'ventana',
      'lang': 'espanol'
    }],
    'bicycle': [{
      'value': 'bicicleta',
      'lang': 'espanol'
    }]
  };

  $scope.play = function(id) {
    document.getElementById(id).play()
  };

});
app.filter('trustedAudioUrl', function($sce) {
  return function(path, audioFile) {
    return $sce.trustAsResourceUrl(path + audioFile);
  };
});
app.directive('audios', function($sce) {
  return {
    restrict: 'AE',
    scope: {
      code: '=',
      extra: '='
    },
    replace: true,
    template: '<audio id="{{code}}-{{extra}}" ng-src="{{url}}"></audio>',
    link: function(scope) {
      scope.$watch('extra', function(newLang, oldLang) {
        scope.$watch('code', function(newVal, oldVal) {
          var prefix = 'http://www.almatsuy.com/Johanna/sound/words/';
          if (newVal !== undefined) {
            scope.url = $sce.trustAsResourceUrl(prefix + newLang + "/" + newVal + ".mp3");
          }
        })
      });
    }
  };
});

td button {
  text-transform: capitalize;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>

<div ng-app="app" ng-controller="myCtrl">


  <div ng-repeat="word in words">
    <audios ng-repeat="audio in word" code="word.$key" extra="audio.lang" />
  </div>
  
  <input type="text" ng-model="searchKey" placeholder="search by key" />

  <table>
    <tbody ng-repeat="word in words | toArray: true">
      <tr ng-repeat="t1 in word | fuzzyBy: 'value': searchKey">
        <th>{{word.$key}} -- {{t1.lang}}</th>
        <td>
          <button ng-click="play(word.$key+'-'+t1.lang)">{{t1.value}}</button>
        </td>
      </tr>
    </tbody>
  </table>

</div>

Answer 1

我相信这可能与旧的角度版本有关。

我在JSFiddle中尝试了你的代码，在1.1.1版本中我使用Angular它不起作用，但是只要我将版本更改为1.2.1就可以了。

在ngRepeat中按$ key过滤

1 个答案: