Angularjs 为什么不显示ng模型初始值_Angularjs

Angularjs 为什么不显示ng模型初始值

angularjs

Angularjs 为什么不显示ng模型初始值,angularjs,Angularjs,我是新手。这是我的html： <!DOCTYPE html> <html> <head> <title>My App</title> <script src = "angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller

我是新手。这是我的html：

<!DOCTYPE html>
    <html>
    <head>
        <title>My App</title>
        <script src = "angular.js"></script>

    </head>
    <body ng-app="myApp">
        <div ng-controller="index">
            {{message}}
        </div>

        <form>
            First Name:<br>
            <input type="text" ng-model="user.username">{{user.username}}<br>
            Last Name:<br>
            <input type="password" ng-model="user.password">
        </form>

        <script src = "app.js"></script>
        <script src = "credentials.js"></script>
    </body>
    </html>

无法显示用户名和密码。为什么?

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

正如你在这个例子中看到的

ng model指令绑定HTML控件的值输入，选择，文本区域到应用程序数据。ng bind指令绑定应用程序将数据添加到HTML视图中

我可以在代码中看到ng模型，但实际上并没有将数据绑定到视图的ng绑定。这可能就是代码不显示用户名和密码的原因

正如你在这个例子中看到的

ng model指令绑定HTML控件的值输入，选择，文本区域到应用程序数据。ng bind指令绑定应用程序将数据添加到HTML视图中

我可以在代码中看到ng模型，但实际上并没有将数据绑定到视图的ng绑定。这可能就是代码不显示用户名和密码的原因。

使用ng model指令，可以将输入字段的值绑定到AngularJS中创建的变量

您可以使用ng bind指令，该指令将元素的innerHTML绑定到指定的模型属性：

输入元素的ng模型，如input、textarea和h1的ng绑定、标签等

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-controller="index" ng-app="myApp">
  <form>
    First Name:
    <br>
    <input type="text" ng-model="user.username">
    <br> Last Name:
    <br>
    <input type="password" ng-model="user.password">
  </form>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("index", ["$scope", function($scope) {
    $scope.user = {
      username: "admin",
      password: "admin"
    };
  }]);

</script>

</body>
</html>

使用ng model指令，您可以将输入字段的值绑定到AngularJS中创建的变量

您可以使用ng bind指令，该指令将元素的innerHTML绑定到指定的模型属性：

输入元素的ng模型，如input、textarea和h1的ng绑定、标签等

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-controller="index" ng-app="myApp">
  <form>
    First Name:
    <br>
    <input type="text" ng-model="user.username">
    <br> Last Name:
    <br>
    <input type="password" ng-model="user.password">
  </form>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("index", ["$scope", function($scope) {
    $scope.user = {
      username: "admin",
      password: "admin"
    };
  }]);

</script>

</body>
</html>

控制器div未覆盖用户对象所在的区域。控制器div必须包含访问用户对象的代码

您可以像这样更改代码

<body ng-app="myApp">
        <div ng-controller="index">
            {{message}}


        <form>
            First Name:<br>
            <input type="text" ng-model="user.username">{{user.username}}<br>
            Last Name:<br>
            <input type="password" ng-model="user.password">
        </form>
 </div>
        <script src = "app.js"></script>
        <script src = "credentials.js"></script>
    </body>

控制器div未覆盖用户对象所在的区域。控制器div必须包含访问用户对象的代码

您可以像这样更改代码

<body ng-app="myApp">
        <div ng-controller="index">
            {{message}}


        <form>
            First Name:<br>
            <input type="text" ng-model="user.username">{{user.username}}<br>
            Last Name:<br>
            <input type="password" ng-model="user.password">
        </form>
 </div>
        <script src = "app.js"></script>
        <script src = "credentials.js"></script>
    </body>

在HTML页面中使用ng app和ng控制器指令

这里是相同的Plunker链接

别忘了提供参考

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

在HTML页面中使用ng app和ng控制器指令

这里是相同的Plunker链接

别忘了提供参考

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

问题在于，您已经将控制器绑定到了{{message}}表达式周围的div标记，而不是包含表单的整个块。如果将控制器绑定到周围的元素，代码将按预期工作

有一种方法可以做到这一点：

<body ng-app="myApp">
    <div ng-controller="index">
        <div>
            {{message}}
        </div>

        <form>
            First Name:<br>
            <input type="text" ng-model="user.username">{{user.username}}<br>
            Last Name:<br>
            <input type="password" ng-model="user.password">
        </form>
    </div>
</body>

问题在于，您已经将控制器绑定到了{{message}}表达式周围的div标记，而不是包含表单的整个块。如果将控制器绑定到周围的元素，代码将按预期工作

有一种方法可以做到这一点：

<body ng-app="myApp">
    <div ng-controller="index">
        <div>
            {{message}}
        </div>

        <form>
            First Name:<br>
            <input type="text" ng-model="user.username">{{user.username}}<br>
            Last Name:<br>
            <input type="password" ng-model="user.password">
        </form>
    </div>
</body>

正如Venu prasad H S和domyos已经建议的，对M.Ko的评论的回复，因为我没有足够的声誉来评论

您已在控制器范围外定义ng模型

<div ng-controller="index">
            {{message}}
 </div>

这样做的目的是你的控制器只能访问这个div里面的东西，就像很多其他人建议你可以把整个div放在身体里一样

<body ng-app="myApp">
<div ng-controller="index">
    <div>
        {{message}}
    </div>

    <form>
        First Name:<br>
        <input type="text" ng-model="user.username">{{user.username}}<br>
        Last Name:<br>
        <input type="password" ng-model="user.password">
    </form>
</div>

正如domyos非常贴切地提供的那样，现在这样做的目的是，您的控制器可以访问表单，并且您可以显示所需的值

或者，您也可以使用ng应用程序在body标签中添加控制器

<body ng-app="myApp" ng-controller="index">

但建议您将其放在一个div中，这样您就可以在一个模块中拥有多个控制器，即在ng应用程序上

另外，尝试将控制器命名为indexCtrl，就像在IndexController中一样。这只是一种命名约定，但会使代码更具可读性。

希望您觉得这些信息有用。

正如Venu prasad H S和domyos已经建议的那样，我没有足够的声誉来评论M.Ko的评论