Question

为什么下面的代码不能将数据从js提取到html文件中？

https://jsfiddle.net/SaifHarbia/g64jxt4u/4/

HTML代码

<head ng-app="myApp">
  <p1>
  mobile client
  </p1>
  <li> <p2>Mobile Client mangement</p2>
  <t>Edit Client</t></li>

  </head>
  <body ng-controller="mobilCtrl">
  <form >
    <table>
   <tr>
     <td>{{forms.fild1}}</td>
     <td></td>
     <td>{{forms.fild2}}</td>
     <td></td>
   </tr>
    </table>
    </form>

  </body>

JS代码

var app = angular.module("myApp", []);

app.controller('mobilCtrl', [ function($scope) { 


  $scope.forms = 
    [
        "fild1" : "customer name", 
        "fild2" :"national number" 
    ];


}]);

Answer 1

我在真正阅读你的代码之前评论过.. 为什么<head>标签内有东西？ Head适用于元素，脚本，样式或标题，不适用于<li>元素等！

将您的HTML更改为：

    <body ng-app="myApp" ng-controller="mobilCtrl">
    <p>mobile client</p>

    <p>Mobile Client mangement</p>Edit Client

    <form>
        <table>
            <tr ng-repeat="mobile in forms">
                <td>{{mobile.fild1}}</td>

                <td></td>

                <td>{{mobile.fild2}}</td>

                <td></td>
            </tr>
        </table>
    </form>
</body>

你的javascript应该是这样的：

var app = angular.module("myApp", []);

app.controller('mobilCtrl', function($scope) { 

  $scope.forms = [{

        "fild1" : "customer name", 
        "fild2" :"national number" 


  }];
});

Answer 2

请仔细阅读初学者的Angular JS教程，了解其结构。因为您在head部分使用ng-app指令。

其次，你可以参考这个简单的角度js小提琴来理解它。 AngularJS Simple Example - JSFiddle

<强> HTML：

<div ng-app ng-controller="LoginController">
    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName"></input>
    <input type="submit" ng-click="login()" value="Login"></input>
    <div ng-repeat="login in logins">{{ login }}</div>
</div>

<强> JS：

function LoginController($scope) {
    $scope.user = {
        firstName: "Foo",
        lastName: "Bar"
    };
    $scope.logins = [];
    $scope.login = function () {
        $scope.logins.push($scope.user.firstName + " was logged in.");
    };
}

角度没有在jsfiddle上获取数据

2 个答案: