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

非常简约的解决方案：

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

Answer 2

使用ng-show和ng-hide指令可能是实现此目的的最佳方法。这样你就可以得到一个可以指向的范围变量。您还可以执行ng-class，如果为true，则将图标旋转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>

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

2 个答案: