javascript - AngularJS - 显示和隐藏带有 glyphicon 的箭头图标

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>  

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

它是这样的:

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:

看看下面的工作示例:

简单地使用 ng-class 根据函数返回的表达式附加 glyphicon-chevron-up 或 glyphicon-chevron-down检查 textarea 是否可见。

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>