使用 Angular JS 使卡片动态化
Make a card dynamic with Angular JS
我的 index.js 文件中有这些数据:
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.demos = [ {
paragrafo: 'richiesta',
title:'demo1',
paragrafo2:'dskjdfdjfdfjkdf',
link: 'https://www.google.it',
},
{
paragrafo: 'richiesta',
title:'demo2',
paragrafo2:'dfhfhfjgfkjghfjkgf',
link: 'https://www.youtube.it',
},
{
paragrafo: 'richiesta',
title:'demo3',
paragrafo2:'sjdsdjddfjdf',
link: 'https://www.sportmediaset.it',
},
{
paragrafo: 'richiesta',
title:'demo4',
paragrafo2:'sdjkdhdkjfhdjfh',
link: 'https://www.elbocon.pe',
},
];
})
.component('card', {
templateUrl: 'card.html'
})
在我的 card.html 组件中,我使用了 ng-repeat,我尝试使用 ng -repeat:
对其进行迭代
<div ng-repeat="demo in demos">
<div class="card" style="width: 18rem">
<div class="card-body">
<p>{{demo.paragrafo}}</p>
<h5 class="card-title">{{demo.title}}</h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text">{{demo.paragrafo2}}</p>
<a class="card-link">{{demo.link}}</a>
</div>
</div>
</div>
并且在 index.html 中,我也将组件放在 html 索引中:
<body ng-app="app" ng-cloak>
<div ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col">
<card></card>
</div>
</div>
</div>
</div>
</body>
但是不行,我想要4张不同数据的卡片出现,谁能帮帮我?
你需要bind your data to the component。此外,访问组件内的数据需要引用 $ctrl.
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.demos = [{
paragrafo: 'richiesta',
title: 'demo1',
paragrafo2: 'dskjdfdjfdfjkdf',
link: 'https://www.google.it',
},
{
paragrafo: 'richiesta',
title: 'demo2',
paragrafo2: 'dfhfhfjgfkjghfjkgf',
link: 'https://www.youtube.it',
},
{
paragrafo: 'richiesta',
title: 'demo3',
paragrafo2: 'sjdsdjddfjdf',
link: 'https://www.sportmediaset.it',
},
{
paragrafo: 'richiesta',
title: 'demo4',
paragrafo2: 'sdjkdhdkjfhdjfh',
link: 'https://www.elbocon.pe',
},
];
}])
.component('card', {
bindings: {
demo: '<'
},
template: '<div class="card" style="width: 18rem"><div class="card-body"><p>{{$ctrl.demo.paragrafo}}</p><h5 class="card-title">{{$ctrl.demo.title}}</h5><h6 class="card-subtitle mb-2 text-muted"></h6><p class="card-text">{{$ctrl.demo.paragrafo2}}</p><a class="card-link">{{$ctrl.demo.link}}</a></div></div>'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<card demo="data" ng-repeat="data in demos">
</card>
</div>
我的 index.js 文件中有这些数据:
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.demos = [ {
paragrafo: 'richiesta',
title:'demo1',
paragrafo2:'dskjdfdjfdfjkdf',
link: 'https://www.google.it',
},
{
paragrafo: 'richiesta',
title:'demo2',
paragrafo2:'dfhfhfjgfkjghfjkgf',
link: 'https://www.youtube.it',
},
{
paragrafo: 'richiesta',
title:'demo3',
paragrafo2:'sjdsdjddfjdf',
link: 'https://www.sportmediaset.it',
},
{
paragrafo: 'richiesta',
title:'demo4',
paragrafo2:'sdjkdhdkjfhdjfh',
link: 'https://www.elbocon.pe',
},
];
})
.component('card', {
templateUrl: 'card.html'
})
在我的 card.html 组件中,我使用了 ng-repeat,我尝试使用 ng -repeat:
对其进行迭代<div ng-repeat="demo in demos">
<div class="card" style="width: 18rem">
<div class="card-body">
<p>{{demo.paragrafo}}</p>
<h5 class="card-title">{{demo.title}}</h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text">{{demo.paragrafo2}}</p>
<a class="card-link">{{demo.link}}</a>
</div>
</div>
</div>
并且在 index.html 中,我也将组件放在 html 索引中:
<body ng-app="app" ng-cloak>
<div ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col">
<card></card>
</div>
</div>
</div>
</div>
</body>
但是不行,我想要4张不同数据的卡片出现,谁能帮帮我?
你需要bind your data to the component。此外,访问组件内的数据需要引用 $ctrl.
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.demos = [{
paragrafo: 'richiesta',
title: 'demo1',
paragrafo2: 'dskjdfdjfdfjkdf',
link: 'https://www.google.it',
},
{
paragrafo: 'richiesta',
title: 'demo2',
paragrafo2: 'dfhfhfjgfkjghfjkgf',
link: 'https://www.youtube.it',
},
{
paragrafo: 'richiesta',
title: 'demo3',
paragrafo2: 'sjdsdjddfjdf',
link: 'https://www.sportmediaset.it',
},
{
paragrafo: 'richiesta',
title: 'demo4',
paragrafo2: 'sdjkdhdkjfhdjfh',
link: 'https://www.elbocon.pe',
},
];
}])
.component('card', {
bindings: {
demo: '<'
},
template: '<div class="card" style="width: 18rem"><div class="card-body"><p>{{$ctrl.demo.paragrafo}}</p><h5 class="card-title">{{$ctrl.demo.title}}</h5><h6 class="card-subtitle mb-2 text-muted"></h6><p class="card-text">{{$ctrl.demo.paragrafo2}}</p><a class="card-link">{{$ctrl.demo.link}}</a></div></div>'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<card demo="data" ng-repeat="data in demos">
</card>
</div>