AngularJS - 글리프콘이있는 화살표 아이콘 표시 및 숨기기

Question

코드에 문제가 있습니다. 화살표가 가리키는 "NotesText"를 숨기고 "NotesText"화살표를 표시 한 후 가리켜 야합니다. 이 일이 일어날 수있는 길을 찾을 수 없습니다. 제발, 도와주세요. 기본적으로, 내가 필요

내가 표시하거나이 내가 가진 무엇

숨길 필요가있는 경우 화살표의 방향이 일치 변경하는 것입니다. 이는 모습입니다

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

이것은 컨트롤러

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

:

이

은 HTML입니다

enter image description here

Answer 1

아주 최소한의 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>

더 자세한 SOLN :

아래의 작업 예제를 살펴 유무 :

textarea이 표시되는지 확인하는 함수에서 반환 한 식을 기준으로 ng-class을 사용하여 glyphicon-chevron-up 또는 glyphicon-chevron-down을 붙이기 만하면됩니다.

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

이렇게하려면 ng-show 및 ng-hide 지시문을 사용하는 것이 가장 좋은 방법 일 수 있습니다. 그렇게하면 범위 변수를 지정할 수 있습니다. 만약 사실이라면 아이콘을 180도 회전시킬 수 있습니다. 어쨌든 그것은 당신에게 달려 있습니다.

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