up vote 2 down vote favorite

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.

share|improve this question
up vote 0 down vote accepted

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.

share|improve this answer
    
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. – user3681971 Jul 1 '14 at 20:04
up vote 1 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.