Alvaro Enrique Alvaro Enrique - 4 months ago 67
AngularJS Question

AngularJS - show and hide arrow icon with glyphicon

I have a problem with the code, all I need is to hide the "NotesText" the arrow is pointing up, and after showing the "NotesText" arrow must be pointing down. I can not find the way to make this happen, please, I need help.

Basically, I need is to change the direction of the arrow agree if I need to show or hide

This is what I have .

This is HTML:

<div id="notes-controller" class="collapse in" ng-controller="NotesController">
<fieldset>
<legend class="translatable" data-i18n="Notes">Notes</legend>
<form novalidate class="simple-form">
<div class="container col-md-12" ng-show="$ctrl.param.note.visible">
<textarea class="col-md-12" ng-readonly="$ctrl.param.note.readonly" type="text" id="Notes" ng-model="$ctrl.notes.note" ng-model-options="{ getterSetter: true }" />
</div>
</form>
</fieldset>
</div>

<span type="button" class="glyphicon glyphicon-chevron-up" data-toggle="collapse" data-target="#notes-controller"></span>


This is Controller

angular.
module('notesText').
component('notesText', {
templateUrl: '/Scripts/test/notes-text/notes-text.template.html',
bindings: {
notes: '=',
param: '='
}
}).controller('NotesController', ['$scope', function ($scope) {
$scope.master = {};

$scope.update = function (user) {
$scope.master = angular.copy(user);
};

$scope.reset = function () {
$scope.user = angular.copy($scope.master);
};

$scope.reset();
}]);


This is how it looks:

enter image description here

Answer

A very Minimalistic Soln:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container" ng-app="">
  <textarea id="myTextArea" ng-hide="isHidden">MY TEXT</textarea>
  <br>

  <span class="glyphicon" ng-class="isHidden ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'" ng-click="isHidden = !isHidden;">
  </span>


</div>

A more verbose Soln:

Have a look at the working example below:

Simply using ng-class to attach glyphicon-chevron-up or glyphicon-chevron-down based on expression returned by a function that checks if the textarea is visible.

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.isShown = function() {
      return $('#myTextArea').is(':visible');
    }
    $scope.hideIt = function() {
      $('#myTextArea').toggle();
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container" ng-app="myApp" ng-controller="myCtrl">
  <textarea id="myTextArea">MY TEXT</textarea>
  <br>

  <span class="glyphicon" 
        ng-class="isShown() ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'" 
        ng-click="hideIt()">
  </span>


</div>