【问题标题】:Changing text in addition to another content depending on ngShow and ngHide in Angular根据 Angular 中的 ngShow 和 ngHide 更改文本以及其他内容
【发布时间】:2015-10-25 23:57:14
【问题描述】:

我浏览了与我相关的两个已回答问题 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';
}

到目前为止,表单是否显示都没有关系,文本始终保持显示

【问题讨论】:

  • 您可以将您尝试的内容放入 JSFiddle 或 Plunker 中吗?很难知道您是错过了关键步骤,还是有更复杂的事情在起作用。
  • 答案中提供的想法非常适合我,不过感谢您的评论

标签: angularjs


【解决方案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>

【讨论】:

  • 我很容易将代码实现到我的项目中,非常感谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-06-05
  • 2018-09-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多