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

时间:2016-12-13 14:48:04

标签: javascript html angularjs

我正在角度应用程序中共同开发登录系统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>

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

3 个答案:

答案 0 :(得分:2)

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

<强>样本

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>

答案 1 :(得分:2)

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

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

$scope.someModel = { login: true};

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

答案 2 :(得分:1)

  1. 不要将ng-model放在您的第一个标签上。

  2. 声明$scope.params = {};在控制器中,然后将其参数login设置为true

  3. 检查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>