toggle contents onclick button in angularjs

Question

Here is the JSFIDDLE DEMO which i created using JQuery.

$(function(){
    $("#describe-block-toggle-btn").click(function(){
        $("#ptor-it-block").toggle();
        $(this).text(function(i, text){
          return text === "Start" ? "Stop" : "Start";
      })
    });
    $("#it-block-toggle-btn").click(function(){
        $(this).text(function(i, text){
          return text === "Start" ? "Stop" : "Start";
      })
    });
});

I need to convert my code from JQuery to Angular.

So far I'm able to convert a lot but still not able to achieve the toggling effect as you can see in JSFIDDLE DEMO as I mentioned above.

Here is the link to ANGULARJS DEMO using plunker.

Any help would be appreciated and if someone can point to good angularjs tutorials apart from the official angularjs site tuts it would be great. Way ahead to learn angularjs in depth.

UPDATE:

Luckily I found a bunch of links to blog posts, articles, videos, etc for learning AngularJS, all at one place. Visit the link here and the explore the infinity.

It appears you are still thinking in a jQuery way. I'll fix the plunker but basically you just need to use your model referenced from the view to make things happen instead of trying to pass your elements into the controller. — shaunhusain
– shaunhusain, Commented Mar 22, 2014 at 20:49
I'm still learning angularjs(beginner), tried the code to just get started with. Any help that would point in the correct direction would be appreciated. — softvar
– softvar, Commented Mar 22, 2014 at 20:53

shaunhusain · Accepted Answer · 2014-03-22 20:59:40Z

2

http://plnkr.co/edit/VMfKJ2IKJ9WNRPlwE8Su

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="ptorJasmineAddon">
    <div id="ptor-nav-addon">
      <span>
        {{describeButtonData.block}}
        <button ng-click="changeStatus(describeButtonData)">{{describeButtonData.status}}</button>
      </span>
      <span ng-show="describeButtonData.status == 'Stop'">
        {{itButtonData.block}}
        <button ng-click="changeStatus(itButtonData)">{{itButtonData.status}}</button>
      </span>
    </div>
  </div>
</body>

</html>

JS

// Code goes here

var app = angular.module('myApp', []);
app.controller('ptorJasmineAddon', function($scope) {
  $scope.describeButtonData = {
    'block': 'Describe Block',
    'status': 'Start',
    'btnId': 'describe-block-toggle-btn',
    'id': 'ptor-describe-block'
  }
  $scope.itButtonData = {
    'block': 'It Block',
    'status': 'Start',
    'btnId': 'ptor-it-block',
    'id': 'ptor-it-block'
  };
  $scope.shown=true;
  $scope.changeStatus = function(btn) {
    btn.status = btn.status === "Start" ? "Stop" : "Start";
    console.log(btn);
  };
});

Since you mentioned your a beginner too I'd recommend these vid resources if you like learning about things this way:

https://www.youtube.com/watch?v=ZhfUv0spHCY

lots of small tutorials on parts of angular at http://egghead.io

Also there's a #angularjs IRC on freenode.net where people can be pretty helpful and knowledgeable.

If you need to do some DOM manipulation you'll want to use a directive. When you write a directive you basically give it a name then tell it where you should expect to find it (element/tag E, class C, comment M, or attribute A). Here's the directive definition hint from the AngularJS plugin in SublimeText:

directive('directiveName', [ function(){ //would reference in html like <directive-name> note camel case to snake case conversion
  // Runs during compile
  return {
    // name: '',
    // priority: 1,
    // terminal: true,
    // scope: {}, // {} = isolate, true = child, false/undefined = no change
    // controller: function($scope, $element, $attrs, $transclude) {},
    // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
    // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
    // template: '',
    // templateUrl: '',
    // replace: true,
    // transclude: true,
    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
    link: function($scope, iElm, iAttrs, controller) {

    }
  };
}]);

answered Mar 22, 2014 at 20:59

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

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

5 Comments

softvar Over a year ago

Thanks a lot @shaunhusain!. Everything you wrote here widens my view.

shaunhusain Over a year ago

No problem glad I could help, it is a bit of a rough ride learning the details of Angular and then trying to figure out the best way to do things since you end up with so many options, but once you get your head around some of it you can do anything Javascript will allow you to do and do it cleanly. bennadel.com/blog/…

softvar Over a year ago

Nice article...I was having the same feeling to continue with my old friend-JQuery :) But angularjs is so dynamic and even many startups are using it on regular basis.

softvar Over a year ago

Luckily I found github.com/jmcunningham/AngularJS-Learning. A bunch of links to blog posts, articles, videos, etc for learning AngularJS.

shaunhusain Over a year ago

Wow that is awesome I'll have to bookmark it for future reference thanks for the tip.

Collectives™ on Stack Overflow

toggle contents onclick button in angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related