Pass Angular JS Data to Button OnClick Event

Question

Is it possible to pass angular js data available on a cshtml page to a button click event?

the angular js object is referenced as item.property. {{item.property}} works well between the html tags.

The function is:

function ShowFileDialog(ProjectID)
{
    alert(ProjectID);

}

The cshtml that I would like to do is something like this, but clearly is very wrong.

<button id="button-view" onclick="ShowFileDialog({{item.projectId}})"></button>

I already have a work around - so others are not needed.

Moses Machua · Accepted Answer · 2015-01-04 19:26:07Z

1

In your controller,

$scope.project= {"Id": 1, "name":"project1"};
$scope.ShowFileDialog = function(ProjectID)
    {
        alert(ProjectID);
    }

then in your html,

<button id="button-view" ng-click="ShowFileDialog(project.Id)">show dialog</button>

If you have a list of projects as such,

$scope.projects= [{"Id": 1, "name":"project1"},{"Id": 2, "name":"project2"}];

then in your html use ng-repeat as,

<ul>
    <li ng-repeat="proj in projects>
        {{proj.name}} <button ng-click="ShowFileDialog(proj.Id)">show dialog</button>
    </li>
</ul>

see more here

answered Jan 4, 2015 at 19:26

Moses Machua

11.6k3 gold badges39 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dalorzo · Accepted Answer · 2014-06-03 03:39:50Z

0

From my POV these type of mixes shouldn't be done. The closest correct approach should be:

Setting your view with a value in the way angular was meant to be used:

<input type="text" ng-model="myVariable" id="myVar" />

and if you want to you get or use this value get it from the view like:

<script type="text/javascript">  
    var param1 = document.getElementById("myVal").value;
    samplefunction( param1 );   
</script>

Online Demo

Note: In this example I used an input but you could use a data-myVar attribute and get the value from there as well.

edited Jun 3, 2014 at 3:39

answered Jun 3, 2014 at 3:33

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

1 Comment

user3681971 Over a year ago

I am just now getting back to this and it looks helpful. I am completely new to angular-js, so had no idea how it worked or what it is supposed to do.

Collectives™ on Stack Overflow

Pass Angular JS Data to Button OnClick Event

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related