I'm starting to use angularjs and I have a problem, maybe because I'm misusing it. I have a view binded to an array of objects; I want to define properties and methods of these objects in a viewModel, using a constructor function for the property and adding methods to the prototype. Here are the javascript viewModel:
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
}
};
In this viewModel I have two methods that control if some buttons are enabled: one is defined in the constructor, the other is in the prototype. I want to define all the methods only in the prototype, but angular seem to not see the methods defined here. In my controller I load some data from the server and then I populate the array of viewModels; if I debug the array I can see 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");
});
}
};
In the view I have this markup that loop over the array and bind some input and the state of the button to every viewModel; for some reason the button binded to the method LockEnabled is working, while the button binded to the method StartEnabled is always disabled. Here is an extract of 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) is working, the first one no.
data-ng-disabled="cdl.StartEnabled"should bedata-ng-disabled="cdl.StartEnabled()"at both places.