Question

为什么下面的陈述有效但后面的陈述不起作用

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
 </head>
 <body ng-app>
 <table ng-init='products = [{"name":"blah", "code":"ten12", "available":"yes","price":243}]'>
     <thead>
         <tr>
            <td></td>
            <td>Product</td>
            <td>Code</td>
            <td>Available</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="product in products">
            <td>{{product.name}}</td>
            <td>{{product.code}}</td>
            <td>{{product.available}}</td>
            <td>{{product.price}}</td>
           </tr>
          </tbody>
         </table>

  </body>
</html>

而且这个不起作用

<!DOCTYPE html>
<html >
<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js" type="text/javascript"></script>

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
 </head>
 <body ng-app>
 <table ng-init='products = [{"name":"blah", "code":"ten12", "available":"yes","price":243}]'>
     <thead>
         <tr>
            <td></td>
            <td>Product</td>
            <td>Code</td>
            <td>Available</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{products.name}}</td>
            <td>{{products.code}}</td>
            <td>{{products.available}}</td>
            <td>{{products.price}}</td>
           </tr>
          </tbody>
         </table>

  </body>
</html>

我在上述两个陈述中看到的唯一区别是第二个缺少ng-repeat语句，但产品变量在两个语句中都被初始化。所以在第二个声明中如果我直接调用产品不应该至少被调用一次？

Answer 1

在这两个例子中，products是一个数组（在这种情况下，有一个项目）。

在第一个中，您使用ng-repeat遍历数组中的项目，这样可以正常工作。但是，在第二个中，您尝试显示数组的属性name，code等，而不是任何项目，并且数组没有这些属性，因此不会显示任何内容。（相反，例如，您将从products.length而不是product.length获得一个值，因为数组具有长度属性而项目没有。）

您可以使用

显示数组中第一个项目的属性

        <td>{{products[0].name}}</td>
        <td>{{products[0].code}}</td>
        <td>{{products[0].available}}</td>
        <td>{{products[0].price}}</td>

代替。但那就是那样，只显示第一个。如果要动态显示每个示例的数据，则需要使用ng-repeat，如第一个示例所示。

Angular - ng-init语句 - 该语句不起作用

1 个答案: