Question

我是Angular JS的新手。这是我的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>

然后我想初始化一些用户名和密码的数据：

(function(){
    var app=angular.module("myApp",[]);
    app.controller("index", ["$scope", function($scope){
        $scope.message="Hello, it's me!";
        $scope.user={
            username: "admin",
            password: "admin"
        };      
    }]);
})();

不会显示用户名和密码。为什么呢？

Answer 1

您的问题是您已将控制器绑定到{{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>

Answer 2

您的控制器div未覆盖您拥有用户对象的区域。 controller 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>

Answer 3

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

你可以在这个例子中看到

ng-model指令绑定HTML控件的值（输入，选择， textarea）到应用程序数据。 ng-bind指令绑定应用程序数据到HTML视图。

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

Answer 4

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

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

用于输入元素的ng-model，如输入，textarea和用于h1，标签等的ng-bind。

<!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>

Answer 5

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

您已将ng-model定义为控制器范围之外的

<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-app

在body标签中控制您的控制器

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

但是建议你把它放在一个div中，你想这样做，这样你就可以在一个模块中有多个控制器，即在ng-app上。

另外，尝试将控制器命名为“indexCtrl”，就像在IndexController中一样，它只是一个命名约定，但这使得代码更具可读性。希望您发现此信息有用。

Answer 6

在HTML页面中使用ng-app和ng-controller指令。

以下是Plunker的链接。

Plunker

并且不要忘记提供参考

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

为什么不显示ng-model初始值

6 个答案: