在Angularjs中创建无序列表

时间:2017-05-23 04:09:36

标签: angularjs-directive angularjs-controller

2017-05-23T02:35:57.4457330Z [command]/usr/local/bin/dotnet restore ./src/DocPropsService.sln
2017-05-23T02:35:59.8903860Z   Restoring packages for /myagent/_work/3/s/src/CommandService/DocProps.CommandService/DocProps.CommandService.csproj...
2017-05-23T02:36:09.8543710Z   Generating MSBuild file /myagent/_work/3/s/src/CommandService/DocProps.CommandService/obj/DocProps.CommandService.csproj.nuget.g.props.
2017-05-23T02:36:09.8786540Z /opt/dotnet/sdk/1.0.4/NuGet.targets(97,5): error : Access to the path '/myagent/_work/3/s/src/CommandService/DocProps.CommandService/obj/23507835-d558-4207-80a0-85b919019109.tmp' is denied. [/myagent/_work/3/s/src/DocPropsService.sln]
2017-05-23T02:36:09.8812240Z /opt/dotnet/sdk/1.0.4/NuGet.targets(97,5): error :   Permission denied [/myagent/_work/3/s/src/DocPropsService.sln]

您好。我创建了一个无序列表,但我想为列添加标题。它应该被视为一个表格,如名称,类别,价格和到期日。有什么帮助吗?

1 个答案:

答案 0 :(得分:0)

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>