AngularJS - Pfeilsymbol mit Glyphon ein- und ausblenden

Question

Ich habe ein Problem mit dem Code, ich muss nur den "NotesText" ausblenden, den der Pfeil nach oben zeigt, und nach dem Anzeigen muss der "NotesText" -Pfeil nach unten zeigen. Ich kann den Weg nicht finden, um das zu erreichen, bitte, ich brauche Hilfe.

Grundsätzlich ich brauche, ist die Richtung des Pfeils zu ändern zustimmen, wenn ich zeigen müssen oder ausblenden

Dies ist, was ich habe.

Dies ist 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> 

Dies ist 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(); 
    }]); 

Dies ist, wie es aussieht:

enter image description here

Answer 1

Ein sehr minimalistisch 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>

Eine ausführlichere Soln:

Werfen Sie einen Blick auf die Arbeitsbeispiel unter:

Einfach ng-class verwenden, um glyphicon-chevron-up oder glyphicon-chevron-down basierend auf einem Ausdruck anzuhängen, der von einer Funktion zurückgegeben wird, die überprüft, ob textarea sichtbar ist.

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>

Answer 2

Die Verwendung der ng-show- und ng-hide-Direktive ist möglicherweise der beste Weg, dies zu erreichen. Auf diese Weise können Sie eine Bereichsvariable haben, auf die Sie zeigen können. Sie können auch eine ng-Klasse erstellen, die, wenn sie zutrifft, das Symbol um 180 Grad dreht. Wie auch immer, es liegt an dir.

<span ng-show="$ctrl.IsToggled" type="button" class="glyphicon glyphicon-chevron-up" data-toggle="collapse" data-target="#notes-controller"></span> 
<span ng-hide="$ctrl.IsToggled" type="button" class="glyphicon glyphicon-chevron-down" data-toggle="collapse" data-target="#notes-controller"></span>