Angular - toggle class, text, and scroll in controller using ngclick

Question

I have been rewriting some Jquery tasks that I had previously written and want them to now work in my AngularJs App.

I am able to toggle the glyphicons, but how can I change the text and scroll feature as well?

This is my code:

HTML

<body ng-app="toggleApp" ng-controller="toggleCtrl as tc">
  <a ng-click="tc.toggle('glyph'); tc.toggle('text')" class="lead p-color learn-button togglebtn shake shake-rotate">
     <small>
         <span id="toggleGlyph" ng-class="tc.iconGlyph ? 'glyphicon glyphicon-minus' : 'glyphicon glyphicon-plus'">
         </span>&nbsp;<span ng-class="tc.textDesc ? 'Hide' : 'Learn More'">Learn More</span>
     </small>
  </a>
</body>

Main Javascript

var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);

app.config(function($interpolateProvider, $routeProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');

  $routeProvider

    .when('/', {
      templateUrl : 'pages/LandingPage.html',
      controller : 'LandingCtrl'
  })

Controller Javascript

app.controller('toggleCtrl', function () {
  this.toggle = function (property) {
    this.iconGlyph = (property === 'glyph') ? !this.iconGlyph : this.iconGlyph;
    this.textDesc = (property === 'text') ? !this.textDesc : this.textDesc;
   }
});

Previous Jquery

$(function () {
  $('a.togglebtn').click(function () {
    $("#toggleGlyph").toggleClass("glyphicon-minus glyphicon-plus");
    $('#toggleText').text($('#toggleText').text() === "Learn More" ? "Hide" : "Learn More");
    $('#myContent').stop().slideToggle(500);
    $('html,body').animate({ scrollTop: $('#myContent').offset().top - 200 }, 800);
    return false;
  });
});

http://jsfiddle.net/amptwig91/7jf5sdnv/

Milos Mosovsky · Accepted Answer · 2015-06-26 22:43:25Z

1

check this snippet

var app = angular.module("app", []);

app.controller('toggleCtrl', function() {

  var _parent = this;
  this.toggle = function() {
    _parent.isToggled = !_parent.isToggled;
    setText();
  }

  function setText() {
    if (_parent.isToggled) {
      _parent.text = 'Hide';
    } else {
      _parent.text = 'Learn More';
    }
  }
  this.isToggled = false;
  this.text = 'Learn More';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<body ng-app="app" ng-controller="toggleCtrl as _">
  <a href="#" ng-click="_.toggle()"> <i class="fa" ng-class="{'fa-plus' : !_.isToggled , 'fa-minus' : _.isToggled }"></i> {{_.text}}</a>

  <body>

answered Jun 26, 2015 at 22:43

Milos Mosovsky

3,0031 gold badge18 silver badges18 bronze badges

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

4 Comments

Austin Perez Over a year ago

Thanks for your quick response, but I'm not using font awesome and I'm not using angular 1.2.x...If you looked at my fiddle, I am using bootstrap Css and angular 1.3.15.

Milos Mosovsky Over a year ago

And where is problem to adjust your code to use glyphicon classes and angular 1.3.15 , nothing in logic will change. Just css .... I will not making final code which you can ctrl+copy , i am just showing you how it should be done in angular.

Austin Perez Over a year ago

I apologize! It was not an issue with that, you are right! I am using angular-route and each controller is defined in the app to its designated template. When I tried to implement your snippet, it was not working. So I assumed that it was an angular version issue(I have had a lot of version issues so I just assumed that that must be it).... How can I do this with a controller for the template? because "toggleCtrl as_" will not be in the html template since the controller is defined in my ng-app.

Milos Mosovsky Over a year ago

$routeProvider .when('/path', { template: 'TemplateHtml', controller: 'toggleCtrl as _' });

Austin Perez · Accepted Answer · 2015-06-28 18:23:28Z

0

Since I am using UI-Bootstrap. This is how I ended up solving it!

<a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-init="isCollapsed1 = true" data-ng-click="isCollapsed1 = !isCollapsed1"> 
                    <small>
                        <div ng-show="isCollapsed1">
                            <span class="glyphicon glyphicon-plus" ></span> Learn More
                        </div>
                        <div ng-hide="isCollapsed1">
                            <span class="glyphicon glyphicon-minus"></span> Hide
                        </div>
                    </small>
                </a>

answered Jun 28, 2015 at 18:23

Austin Perez

5977 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular - toggle class, text, and scroll in controller using ngclick

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related