在 Angularjs 中创建无序列表

Question

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script>
        angular.module("myApp", [])
                .controller("defaultCtrl", function ($scope) {
                    $scope.products = [
                        {name: "Apples", category: "Fruit", price: 1.20, expiry: 10},
                        {name: "Bananas", category: "Fruit", price: 2.42, expiry: 7},
                        {name: "Pears", category: "Fruit", price: 2.02, expiry: 6}
                    ];
                }).directive('unorderedList', function () {
                    return {
                        link: function (scope, element, attribute) {
                            scope.data = scope[attribute["unorderedList"]];
                        },
                        restrict: 'A',
                        template: "<ul><li ng-repeat='item in data'> {{item.name}} --- {{item.category}} --- {{item.price | currency}} --- {{item.expiry}}</li></ul>"
                    }

                })

        ;
    </script>
</head>
<body ng-controller="defaultCtrl">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3>Products</h3>
    </div>
    <div class="panel-body">
        <div unordered-list="products"></div>
    </div>
</div>
</body>
</html>

你好。我创建了一个无序列表，但我想为列添加标题。它应该被视为 table，如名称、类别、价格和有效期。有什么帮助吗？

Answer 1

For table structure :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script>
        angular.module("myApp", [])
                .controller("defaultCtrl", function ($scope) {
                    $scope.products = [
                        {name: "Apples", category: "Fruit", price: 1.20, expiry: 10},
                        {name: "Bananas", category: "Fruit", price: 2.42, expiry: 7},
                        {name: "Pears", category: "Fruit", price: 2.02, expiry: 6}
                    ];
                }).directive('unorderedList', function () {
                    return {
                        link: function (scope, element, attribute) {
                            scope.data = scope[attribute["unorderedList"]];
                        },
                        restrict: 'A',
                  template ="<table><thread><tr>
<th><div>Name</div></th>
<th><div>Category</div></th>
<th><div>Price</div></th>
<th><div>Expiry</div></th>
</tr> </thread>
<tbody>
<tr ng-repeat='item in data'>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry}}</td>
</tr>
</tbody>
 </table>"template:"template="<table><thread><tr><th><div>Name</div></th><th><div>Category</div></th><th><div>Price</div></th><th><div>Expiry</div></th>
</tr> </thread>
<tbody>
<tr ng-repeat='item in data'>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry}}</td>
</tr>
</tbody>
 </table>"
                    }

                })

        ;
    </script>
</head>
<body ng-controller="defaultCtrl">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3>Products</h3>
    </div>
    <div class="panel-body">
        <div unordered-list="products"></div>
    </div>
</div>
</body>
</html>

在 Angularjs 中创建无序列表

Creating unordered list in Angularjs

angularjs-directive

angularjs-controller