фильтр по $ key в ngRepeat

0

Я пытаюсь манипулировать звуковым элементом HTML5 на угловом бэкэнде. (не сам разработчик)

Используя Angular-filter или любое обходное решение для ключа $, я хотел бы искать по слову. $ 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>
  • 0
    Мне кажется все нормально, в чем проблема?
  • 0
    какую угловую версию вы используете?
Показать ещё 2 комментария
Теги:

1 ответ

0

Я считаю, что это может быть связано со старой угловой версией.

Я пробовал ваш код в JSFiddle, и там, где я использовал Angular в версии 1.1.1, он не работает, но как только я сменил версию на 1.2.1, она отлично работает

Ещё вопросы

Сообщество Overcoder
Наверх
Меню