Angularjs Data Binding Not Working - Within The Controller Scope Variables Are Not Showing The Entered Value

I have a strange situation in which $scope variables binding do not appear to be work as expected. Here is the HTML:

Solution 1:

This scenario generally happens, If you have wrapped your HTML inside ng-if, ng-switchng-repeat.. or some other directive that creates new child scope. See this fiddle.

So it's a best practice to wrap your scope in some model to leverage protypical inheritance and correctly bind data to $scope.

Like : $scope.data.aabbcc = 0 and use it like ng-model ='data.aabbcc'.

See this for few minutes and Read this for complete understanding.

Solution 2:

check this working example

<div ng-controller="MyCtrl">
Hello, {{name}}!
 <input type="number" ng-model="name"/>
 <button class="btn btn-default" ng-disabled="Cannot_Allocate_Yet" ng-
 click="Get_Sampling_Request_Details()"type="button">test</button>
</div>

var myApp = angular.module('myApp',[]);


 function MyCtrl($scope) {
    $scope.name = 0;
         $scope.Get_Sampling_Request_Details = function () {
console.log("$scope.aabbcc: " + $scope.name) ;
 }
 }

Solution 3:

AngularJS controllers control the data. The scope is the binding part between the HTML (view) and the JavaScript (controller). You must define the ng-model inside a ng-controller within which its scope lies. Try this out.

<divng-controller="myCtrl"><divclass="input-group"style="width:100px"><inputtype="number"class="form-control"id="Sampling_Request_for_Current_Sampling_INPUT"ng-model="aabbcc"style="width:125px;text-align:center"><spanclass="input-group-btn"><buttonclass="btn btn-default"ng-disabled="Cannot_Allocate_Yet"ng-click="Get_Sampling_Request_Details()"type="button">{{All_Labels.Common.Display}}</button></span></div></div><script>var app = angular.module('Myapp', []);
app.controller('myCtrl', function($scope) {
    $scope.Get_Sampling_Request_Details = function () {
    console.log("$scope.aabbcc: " + $scope.aabbcc) ;
} 
});
</script>

Solution 4:

Declare an empty object in your controller section .

eg: $scope.obj = {};

And use like ng-model="obj.key_name" in your html. It will work.

Share