AngularJS - グリフコン付きの矢印アイコンの表示と非表示

Question

コードに問題があります。必要なのは、矢印が上を向いている「NotesText」を隠すことだけで、「NotesText」矢印を指し示している必要があります。私はこれを起こす方法を見つけることができません、お願いします、私は助けが必要です。

基本的に、私は必要な私はこれは私が持っているものである

を表示または非表示にする必要がある場合は、同意矢印の方向を変更することです。

これは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> 

これはこれは、それがどのように見えるかであるコントローラー

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

です：

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が表示されているかどうかを確認する関数によって返された式に基づいて、を単に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ディレクティブを使用するのが最適な方法です。そうすれば、あなたが指すスコープのある変数を持つことができます。 trueの場合、アイコンを180deg回転させるng-classを実行することもできます。いずれにせよ、それはあなた次第です。

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