Question

我正在角度应用程序中共同开发登录系统UI，我希望根据按下按钮显示注册和登录菜单。我可以使用.on方法在控制器中执行此操作，但显然在正确使用角度方面这是不好的做法。

我的代码如下（删除不必要的位）：

<section ng-model="login" ng-init="login=true">
    <section ng-if="login">
        LOGIN CONTENT
        <button ng-click="login = !login">Sign up for an account</button>
    </section>
    <section ng-if="!login">
        SIGN UP CONTENT
    </section>
</section>

我不知道我做错了什么，或者这是否是正确的角度方式。

Answer 1

使用登录字段创建对象。在登录中使用它，因此模型将更新。

<强>样本

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
    $scope.user ={};
   
  }
]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="MainViewController.js"></script>
</head>


<body ng-controller="dobController">
  
  <section ng-model="user.login" ng-init="user.login=true">
    <section ng-if="user.login">
      LOGIN CONTENT
      <button ng-click="user.login = !user.login">Sign up for an account</button>
    </section>
    <section ng-if="!user.login">
      SIGN UP CONTENT
    </section>
  </section>
</body>

</html>

Answer 2

如上所述，由于ngIf指令创建了隔离范围，因此模型中需要一个点，否则对原始值所做的更改将不会“传播”回控制器。

因此在控制器中创建一个对象而不是原始对象，即

$scope.someModel = { login: true};

并在HTML中引用"someModel.login"。这样你也可以摆脱ngInit，因为它不一定是一个很好的用例。

Answer 3

不要将ng-model放在您的第一个标签上。
声明$scope.params = {};在控制器中，然后将其参数login设置为true：

检查this Fiddle demo。

<section ng-init="params.login = true">
  <section ng-if="params.login">
    <button ng-click="params.login = !params.login">Sign up for an account</button>
    LOGIN CONTENT
  </section>
  <section ng-if="!params.login">
    SIGN UP CONTENT
  </section>
  login is: {{params.login}}
</section>

Ng-如果没有响应模型更改

3 个答案: