AngularJS 显示和隐藏答案

【问题标题】：AngularJS Show and HideAngularJS 显示和隐藏
【发布时间】：2014-02-03 12:29:12
【问题描述】：

大家好，我想在 angularjs(bootstrap3.3) 的模态弹出窗口上显示和隐藏 div 以下是我编写的代码，在页面加载时显示所需的 myModal_username1，但在调用控制器函数时单击提交myModal_username1 应该是明显错误的，其他 div 应该是明显真实的.. 但同样没有发生。

控制器代码：

angular.module('ratefastApp')
  .controller('LoginCtrl', function ($scope, Auth, $location) {
 $scope.showUser = 'true';
 $scope.x= function(form) {
 $scope.showPass = 'false';
}}

查看：

<div class="modal fade" id="myModal_username" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Forgot your Username ?</h4>
      </div>
      <!-- div check -->

  <div ng-show="showUser" id="myModal_username1" class="modal-body"
 ng-include src="'views/partials/forgotstage_username.html'">      
       </div>
      <!-- div question -->

  <div ng-hide="showUser" id="myModal_username2" class="modal-body"
 ng-include src="'views/partials/forgot_username.html'">       
       </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【问题讨论】：

标签： angularjs

【解决方案1】：

x() 函数（它的名字真的很糟糕，顺便说一句）不会改变视图使用的showUser 的值。它初始化一个名为showPass的新范围字段：

 $scope.showPass = 'false';

另外，ng-include 有自己的作用域，继承自控制器作用域。因此，在此子范围内设置字段会将字段添加到子范围内，但不会更改控制器范围内的字段值。

您也不应该将字符串用于布尔值。使用true 和false，而不是'true' 和'false'。

所以代码应该是：

$scope.visibility = {
    showUser: true
}

$scope.submit = function(form) {
    $scope.visibility.showUser = false;
}

【讨论】：