Basically, I have an array of strings that contain .mp3's that I would like to play using [ngAudio][1], a custom directive. I figured a good way of doing this would be to assign an id to each button, pass the id into a function that then checks for the passed array index for the string that contains the mp3 that will be played.

However, I can not get this to work. Here is my HTML:

<button id=0 type="button" class="btn btn-primary" ng-click="setSound(id) ; sound.play()">Sound 1</button>

(sound.play() is from ngSound, it is just a function to play the loaded sound) I've also tried: Sound 1 (where id="0" instead of id=0)

And my angularJS:

myApp.controller('mainCtrl', ['$scope', 'ngAudio', function($scope, ngAudio) {
    var allSoundBites = [
        'resources/audio/test.mp3'
    ];

    $scope.setSound = function(id) {
        alert(id);
        $scope.sound = ngAudio.load(allSoundBites[id]);
    };
}])

It works fine if instead of doing

ng-click="setSound(id)"

I do

ng-click="setSound(0)"

But in theory shouldn't that be what is passed anyway?

EDIT: After looking at this problem again I realize that really this is pletely meaningless as it would actually take less code to just pass the number into the function in the first place and not use ID...

... STILL, curious as to why this doesn't work.

[1]:

Basically, I have an array of strings that contain .mp3's that I would like to play using [ngAudio][1], a custom directive. I figured a good way of doing this would be to assign an id to each button, pass the id into a function that then checks for the passed array index for the string that contains the mp3 that will be played.

However, I can not get this to work. Here is my HTML:

<button id=0 type="button" class="btn btn-primary" ng-click="setSound(id) ; sound.play()">Sound 1</button>

(sound.play() is from ngSound, it is just a function to play the loaded sound) I've also tried: Sound 1 (where id="0" instead of id=0)

And my angularJS:

myApp.controller('mainCtrl', ['$scope', 'ngAudio', function($scope, ngAudio) {
    var allSoundBites = [
        'resources/audio/test.mp3'
    ];

    $scope.setSound = function(id) {
        alert(id);
        $scope.sound = ngAudio.load(allSoundBites[id]);
    };
}])

It works fine if instead of doing

ng-click="setSound(id)"

I do

ng-click="setSound(0)"

But in theory shouldn't that be what is passed anyway?

EDIT: After looking at this problem again I realize that really this is pletely meaningless as it would actually take less code to just pass the number into the function in the first place and not use ID...

... STILL, curious as to why this doesn't work.

[1]:

• javascript
• angularjs

• Where does this ID e from? – Fals Commented Jul 10, 2015 at 2:55
• Is ID not just something you can set for a button? – Ajv2324 Commented Jul 10, 2015 at 2:56
• 2 Presumably this is in an ng-repeat of each element in allSoundBites? Why not just pass the actual element into a function, eg $scope.play = function(sound) { ngAudio.load(sound).play() } – Phil Commented Jul 10, 2015 at 2:59
• 1 Looks like you're trying to reference the html attribute value id. That's not how angular works. The attribute values are not auto-bound to the scope. – logee Commented Jul 10, 2015 at 3:04
• shouldnt you deligate the DOM stuff to directive? – Pravin Commented Jul 10, 2015 at 3:46

3 Answers 3

Problem

When you have id as a parameter, it's looking for $scope.id, but it doesn't exist.

One option would be to read the element's id with $event, but if you're using the $scope method elsewhere it could be annoying, and in any case, it's a level of coupling noone needs.

Suggested Solution

I'm going to make an assumption here, which is that id is being set by an ng-repeat as speculated in the ments. If that's the case, you could do something like this:

Controller

myApp.controller('mainCtrl', ['$scope', 'ngAudio', function($scope, ngAudio) {
    $scope.allSoundBites = [
        {name: 'Sound 1', path: 'resources/audio/test.mp3' }
    ];

    $scope.setSound = function(path) {
        $scope.sound = ngAudio.load(path);
    };
}]);

Template

<button ng-repeat="soundBite in allSoundBites" id="sb-{{$index}}"
  class="btn btn-primary" ng-click="setSound(soundBite.path); sound.play();">
    {{soundBite.name}}
</button>

Option 1 Button 1

If you dont have ng-repeat i.e only one button you can use ng-init

Option 2 Button 2 & 3

If you are using ng-repeat i.e multiple buttons, you can use $index similar to @scarl3tt solution.

Here is the JS FIDDLE

<div ng-app="clicker" ng-controller="mainCtrl" ng-init="id=0">
    {{test}}

    <button id=id  type="button" class="btn btn-primary" ng-click="setSound(id)">Sound 1</button>
    <br>
    <button ng-repeat="button in buttons" id={{$index}} type="button" ng-click="setSoundOther($index)" >{{button.btnName}}</button>

If I ain't wrong, you have ng-repeat and inside it you have above button.

• You have to track items by its index (it's special scope property) pass it to function.

• other way would be you can add the id property inside to each iterm in your array and then pass item.id to your function.

It will be great if you can share the fiddle or punter demo.

Let me know if I misunderstood your problem.