I recently started delving into angularjs and encountered an issue which I suspect might be due to my improper use of it. I have a view connected to an array of objects; I aim to define properties and methods for these objects in a viewModel. This involves using a constructor function for the property and adding methods to the prototype. Below is the JavaScript viewModel code:
var CDLViewModel = function(name, operator, state) {
this.Name = name;
this.Operator = operator;
this.State = state;
this.LockEnabled = false; // some logic based on the state here
};
CDLViewModel.prototype = {
StartEnabled: function() {
return false; // some logic based on the state here
}
};
Within this viewModel, there are two methods controlling the enabling of buttons - one defined in the constructor and the other in the prototype. My objective is to solely define all methods within the prototype, but it seems that Angular does not recognize the methods defined here. During the execution in controller, data is fetched from the server following which the array of viewModels is populated. Upon debugging the array, I can observe the objects with the method StartEnabled in the prototype:
function myController($scope, $http, $rootScope) {
if (!$rootScope.cdls) {
$rootScope.cdls = [];
$http.get("http://localhost:8080/...")
.then(function(result) {
for (var i = 0; i < result.data.length; i++) {
$rootScope.cdls[i] = new CDLViewModel(result.data[i].Name, result.data[i].Operator, result.data[i].State);
}
},
function() {
alert("ko");
});
}
};
The view consists of markup that iterates through the array and binds certain input elements along with button states to each viewModel. Strangely, the button linked to the LockEnabled method functions properly while the button associated with the StartEnabled method remains disabled consistently. Below is an extract from the view:
<tabset>
<tab data-ng-repeat="cdl in cdls" heading="{{cdl.Name}}" >
Operator: <input type="text" data-ng-model="cdl.Operator"/>
<a class="btn btn-primary btn-lg btn-block" href="#/start" data-ng-disabled="cdl.StartEnabled" >Start</a>
<a class="btn btn-primary btn-lg btn-block" href="#/lock" data-ng-disabled="cdl.LockEnabled">Lock</a>
The second button/link works as intended, however, the first one does not.