We Keep Coding

Function call by expression in angularJS ng event

I have a problem where I want to map buttons created with ng-repeat to certain functions in the controller. I am defining a string with the function name like this:
$scope.sections = [
{
title: 'Music',
desc: 'Some examples of electronic music I have produced using Fl Studio.',
color: '#76a86f',
icon: 'img/icon/music.png',
onClick: 'clickMusic()'
}];
The function is defined like:
$scope.clickMusic = function() {
hideAll();
document.getElementById("musicContent").classList.remove("hide");
document.getElementById("musicContent").classList.add("show");
};
And then try to map the function to a html button like this:
<div ng-repeat="section in sections">
<div class="sectionThumbnail"">
<button ng-click="section.onClick">
<img ng-src="{{ section.icon }}" id="sectionnail_{{$index}}" ng-mouseover="sectionhoverIn($index)" ng-mouseleave="sectionhoverOut($index)">
</button>
<div class="sectionthumbnailInfo">
<p class="sectiontitle">{{ section.title }}</p>
{{ section.desc }}
</div>
</div>
</div>
However, when clicking the button, nothing happens. I know that the clickMusic() function works as intended once executed, since I use the same function for another button on the webpage. When directly referring to the clickMusic() function in the ng-click, like ng-click="clickMusic()", it also works. I get no error in the console either.
Is there any way to refer to functions from an array in this way, or do I have to create an additional function, which takes an index argument from the repeat and then map the index to the desired functions?
Thanks!

Change onClick: 'clickMusic()' to onClick: clickMusic (this way you store a reference to the function you want to call inside angular template) and then in ng-click simply call that funtion <button ng-click="section.onClick()">

Thanks to mic4ael's suggestion. I managed to figure it out.
in the controller:
$scope.sections = [
{
title: 'Music',
desc: 'Some examples of electronic music I have produced using Fl Studio.',
color: '#76a86f',
icon: 'img/icon/music.png',
onClick: $scope.clickMusic
}];
The $scope is there due to my function being defined as:
$scope.clickMusic = function() {
hideAll();
document.getElementById("musicContent").classList.remove("hide");
document.getElementById("musicContent").classList.add("show");
};
And then, just as mic4ael suggested, in HTML:
<button ng-click="section.onClick()">

React.js - REF undefined

When I test the following code I receive a console error that newText is undefined, am I declaring the val var correctly or am I missing something?
val = ReactDOM.findDOMNode(this.refs[newText]);
renderForm: function() {
return (
<div className="note">
<textarea ref="newText" defaultValue={this.props.children} className="form-control"></textarea>
<button onClick={this.save} className="btn btn-success btn-sm glyphicon glyphicon-floppy-disk"></button>
</div>
)
},

newText here needs to be either a string ("newText") or should use dot notation instead. Using just newText means you're trying to read the value of a variable with that name (which will return undefined).
Change:
this.refs[newText]
To:
this.refs["newText"]
Or:
this.refs.newText

I know it's very late to answer this but I came across the same problem.
I added and update the following sources:
src= "https://unpkg.com/react#15/dist/react.js">
src="https://unpkg.com/react-dom#15/dist/react-dom.js">
It worked for me.
Hope you already found a solution for this.
Cheers!

use this.refs.newText rather than this.refs[newText].

How to pass AngularJS ng-repeat Variable to Javascript click event

I would like to know how to pass Angular ng-repeat variable to my Javascript onclick event
My angular repeater
<div class="data" data-ng-repeat="sub in subs" >
<button onclick="ConfirmDialog(sub.SubID)">Cancel</button>
{{ sub.someOtherProperty}}
{{ sub.someOtherProperty}}
{{ sub.someOtherProperty}}
</div>
My script function
<script type='text/javascript'>
function ConfirmDialog(subID) {
console.log('Succesfully submitted id: ', subID);
});
</script>
The error : sub is not defined (in the onclick() call from the button element) all other properties show as expected.

You are running straight javascript onclick instead of ng-click.
move confirmDialog into your controller and ng-click can attach to it.
<div class="data" data-ng-repeat="sub in subs" >
<button ng-click="ConfirmDialog(sub.SubID)">Cancel</button>
</div>
$scope.ConfirmDialog = function (subID) {
console.log('Succesfully submitted id: ', subID);
});

If you don't want to use ng-click, you still have a chance! Try the following
<tr ng-repeat="supplier in suppliers" id="{{supplier.id}}">
<button onclick="readVariable(this);">
</tr>
<script>
function readVariable(elem){
id = elem.parentNode.id;
console.log(id); //it works!
}
</script>

You should use ng-click instead in order to access the ng-repeat variable
<button ng-click="ConfirmDialog(sub.SubID)">Cancel</button>

Dynamic ng-class value

I've got a directive with this markup:
<button type="button" ng-class="{ 'btn-disabled': button.isDisabled }">
As you can see, btn-disabled is added as a CSS class if the scope's button.isDisabled is truthy.
Also on the scope is a property button.glyphicon. If glyphicon is truthy, I'd like to add the value of it to the <button>'s class as well.
How can I do this?

Maybe not the nicest syntax, but you could use:
data-ng-class="[button.isDisabled ? 'btn-disabled' : '', button.glyphicon]"

You could add a function to ng-class.
<button type="button" ng-class="getClass()">...
and on the controller
$scope.getClass = function(){
return ($scope.button.isDisabled ? "btn-disabled " : " ") + ($scope.button.glyphicon || "");
}
By adding this as a function you could reduce one extra watch that will be created while doing it inline in the template and abstract the logic out of html.

Why can I not access the data attribute of an element with jQuery.

I have the following HTML:
<div class="button disabled dialogLink"
id="edit"
data-action="Edit" >
<div class="sprite-blank" ></div>
</div>
This javascript
$('.dialogLink')
.click(function () {
adminDialog(this);
return false;
});
function adminDialog($link) {
"use strict";
link = {
action: $link.data('action') || ''
I get an error saying
Uncaught TypeError: Object #<HTMLDivElement> has no method 'data'
Does anyone have an idea what I am doing wrong. It seems very simple code so I can't understand what's wrong.

You should first create a jQuery object for using jQuery object's methods like data method. You can use dataset object:
$link.dataset.action
or jQuery data method:
$($link).data('action')