将Angular JS数据传递给Button OnClick事件

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}} 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.

Answer 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

Answer 2

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.