0

I'm doing my first app in Angular and I have a page where everything is disabled except for a button. The user, when click on it, everything is enabled and the content of the title change. Simply are two different classes: one that makes everything opaque and not clickable, the other one makes the normal opacity and makes clickable.

Currently I made this demo with jQuery, triggering a function on click: 

function enable() { 
    document.getElementById('title').innerHTML = "Text2"; 
    $("div").removeClass("disabled");
}

Now, I want to do it in Angular. Actually I've made this:

var app = angular.module("app",[]);
app.controller("MainCtrl",function($scope){
  $scope.Text = 'Text1';
  $scope.disabledClass = "disabled";
  $scope.changeClass = function(){  
      $scope.Text = 'Text2'; //Change text
      $scope.disabledClass = "not-disabled"; //Change class
  };
});

Now I have two questions.

  1. Is this the best approach?
  2. I will manage the app with a user login and password. How can I do so that the class disabled is activated by default when the user opens for the first time the app, but then remains the class not-disabled for the whole duration of the session (once that presses the button for enable), that remains even if the user goes on in the pages, and that remains until it closes?
panagulis72
  • 2,129
  • 6
  • 31
  • 71
  • You could simply bind the logic using the `ng-disabled` directive. `ng-disabled="disabled-variable"`. If the variable evaluates to true, then the element will be disabled. Simply make this `true` on a button click, using `ng-click="{disabled-variable = !disabled-variable}"`. – Defiant Feb 03 '16 at 09:56
  • And how can I store this for the session? – panagulis72 Feb 03 '16 at 09:57
  • You can use the `session.json` URI. This should help: http://stackoverflow.com/questions/14957450/maintaining-session-through-angular-js – Defiant Feb 03 '16 at 09:59
  • You can't save like session in AngularJS. Though it can be done by cookies or Session variable in modern browsers. For that, in your `ng-click` function store the variable. – Arnab Das Feb 03 '16 at 10:00
  • I was also thinking of using $routeProvider. Create two equal html pages but one is clickable and the other not. In practice, they respond to the class "disabled" and "non-disabled." And through $routeProvider I tell them that if he press the button to unlock, it refers to the html page with the unlocked items. What do you think of this approach? Is it possible? Is it too muddled? – panagulis72 Feb 03 '16 at 10:11
  • I've solved using ngStorage – panagulis72 Feb 03 '16 at 10:47

0 Answers0