Search code examples
angularjsasp.net-mvcmodel-view-controllerangularjs-directiveangularjs-scope

@scope value attached to button control not updating? MVC AngularJs

I have a default value for $scope.buttonId = 0

which I am using in button ng-click function like,

<button type="button" class="btn green" ng-click="vm.Update({{buttonId}})">
    {{ 'Save' | translate }}
</button>

Here it is showing me 0 in button function. But when I change $scope.buttonId value in controller function like,

vm.Select = function (value) {
    $scope.buttonId = 5;
}

It is not updating $scope value. It is in the same controller using for view.

Is there any other way to pass id to button function.

Hopes for your suggestion

Thanks

Solution

  • You do not need to use {{buttonId}} interpolation binding in ng-Click directive. Simply use the buttonId and it will work.

    <button type="button" class="btn green" ng-click="vm.Update(buttonId)" >{{ 'Save' | translate }}</button>

    Check out this example for demo.

    <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl">
 
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>{{name}}</h1>
<input type="button" ng-Click="view(name)" value="View"/>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
 $scope.view=function(value)
 {
 	alert(value);
 }
});
</script></body>
</html>

    Hopefully, it will resolve your problem.