CODEWITHSUNDEEP
javascriptangularjstoggle
softvar
softvar

Reputation: 18455

toggle contents onclick button in angularjs

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.

Upvotes: 0

Views: 1900

Answers (1)

shaunhusain
shaunhusain

Reputation: 19748

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) {

    }
  };
}]);

Upvotes: 2

Related Questions