Question

我正在学习Angularjs。我创建了一个简单的样本＆＃34; ng-repeat＆＃34; w3schools样本的功能直接，但无法使它工作....任何线索我在这里做错了什么？提前谢谢。

我附上了我的示例代码，我试图让它在这里工作....

<!DOCTYPE html>
<html>
<head>
   <!-- bootstap-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">   
     <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/sass-bootstrap/dist/css/bootstrap.css" />
   <!-- bootstrap end-->
    <title>TEST TEST</title>


  </head>
<body>

  <div ng-app="testApp" ng-controller="testCtrl">
  <p>
    first Name: <input type="text" ng-model="fname"> 
  </p>
    <p>
    last Name: <input type="text" ng-model="lname"> 
  </p>
  <p>
      Hello: {{fullName() | uppercase}}
  </p>
  </div>

   <div ng-app="testApp1" ng-controller="testNamesCtrl">
     <h5>Diplaying Countries via RESTAPI</h5>
     <ul>
        <li ng-repeat="x in nnames">
        {{ x.Name + ', ' + x.Country }}
       </li>
     </ul>
   </div>

   <!-- bower:js -->
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
   <!-- endbower -->

   <!-- custom Angulajs --> 
   <script src="scripts/controllers/testCtrl.js"></script>
   <script>
      angular.module('testApp1',[]).controller('testNamesCtrl',function($scope){
         $scope.nnames = [
            {Name:'Jani',Country:'Norway'},
                {Name:'Hege',Country:'Sweden'},
            {Name:'Kai',Country:'Denmark'}
         ];
      });
  </script>

</body>
</html>

Answer 1

请勿在标记中使用{{ x.Name+ ', ' + x.Country}}语法。而是尝试这个

{{x.Name}}, {x.Country}

当插入到标记中时，Angular不像传统字符串那样工作，因此不需要像这样格式化它。它只会将模型中的任何内容插入到DOM中，就好像它是您自己编写的静态文本一样。

Answer 2

@Newbee阅读此answer来解释您的问题＆＃34; ...很好奇为什么testApp的顶级DIV标签打破了testApp1的底部DIV标签......＆＃34;

Angularjs样本＆＃34; ng-repeat＆＃34;没有为我渲染

2 个答案: