Question

我浏览了与我有关的两个回答问题 Angular JS ngShow and ngHide / How do I ngShow and ngHide two different elements at the same time with AngularJS?但是，我无法使我的代码正常工作。

我有一个表单，如果单击显示我希望表单以文本隐藏显示，并且当隐藏单击时我希望表单隐藏文本显示

HTML

<div class="formMessage">
    Say Hello
</div>

<div class='assertive formHideShow' ng-click="hider = !hider" ng-class="{ active: hider }">
    <span>{{text}}</span>
</div>

<div class="formForm" ng-show="hider">
    <div class="list">
        <label class="item item-input">
            <span class="input-label">Name</span>
            <input type="text">
        </label>

        <label class="item item-input">
            <span class="input-label">Email</span>
            <input type="text">
        </label>

        <label class="marginTop item item-input">
            <textarea class='formTextArea' placeholder="Your thoughts go here"></textarea>
        </label>

        <button class="button button-block button-balanced">
            Submit
        </button>
    </div>                          
</div>

APP.JS

$scope.hider = true;

if($scope.hider = true) {
    $scope.text='show';
} else {
    $scope.text='hide';
}

到目前为止，表单是否显示并不重要，文本始终保持显示

Answer 1

以下是我认为您正在尝试做的一个简单示例

Plnkr

基本上我稍微改变了控制器

var app = angular.module("app", []);

app.controller("appCtrl", ["$scope", function($scope){
  $scope.isHidden = true;

  $scope.text = function(){
    return ($scope.isHidden ? "Show" : "Hide");
  };

  $scope.hidden = function(){
    $scope.isHidden = !$scope.isHidden;
  };

}]);

使html看起来像

<body ng-app="app" ng-controller="appCtrl">
<div class='assertive formHideShow'>
    <button ng-click="hidden()">{{text()}}</button>
</div>

<div ng-hide="isHidden">
  Hidden Text Here
</div>

根据Angular中的ngShow和ngHide更改另外内容的文本

1 个答案: