0

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.

2
  • 2
    I think this data-ng-disabled="cdl.StartEnabled" should be data-ng-disabled="cdl.StartEnabled()" at both places. Commented Mar 13, 2014 at 8:49
  • Thank you, you're right. I supposed it and I tried, but at the time I had another problem and in the truth I tried only the version without parentheses! Now it's working! Commented Mar 13, 2014 at 8:52

1 Answer 1

0

I think this data-ng-disabled="cdl.StartEnabled" should be data-ng-disabled="cdl.StartEnabled()" at both places.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.