我正在尝试使模板适应我的 MEAN 应用程序，我想在 3 列中显示我从数据库加载的一些信息。问题是，当使用 ng-repeat 时，它只在一列中显示数据。
这是我的代码：
<div class="row mt-5">
<div ng-repeat="woman in women">
<div class= "col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
<a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Card-->
</div>
</div>
</div>
我强制图像具有相同的大小，但我也想在此视图中仅显示部分图片，然后在详细视图中显示完整图像。
谢谢！
看看这个，让我知道这是否是你要找的，
<body ng-app="test">
<div class="row mt-5" ng-controller="testCtrl">
<div ng-repeat="woman in women">
<div class= "col-md-4">
<!--Card-->
<div class="card flexcss">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
<a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Card-->
</div>
</div>
</div>
</body>
.CSS：
.flexcss{
display:flex;
flex-direction: row
}
.card-body{
padding:5px;
}
.JS：
var app= angular.module('test',[]);
app.controller('testCtrl', function($scope, $http) {
$scope.women= [
{
image_url: 'https://upload.wikimedia.org/wikipedia/en/e/ed/Wonder_Woman_%282017_film%29.jpg',
name:'wonder women',
field:'war',
job:'saviour'
},
{
image_url: 'https://upload.wikimedia.org/wikipedia/en/e/ed/Wonder_Woman_%282017_film%29.jpg',
name:'super girl',
field:'war',
job:'fighter'
},
{
image_url: 'https://upload.wikimedia.org/wikipedia/en/e/ed/Wonder_Woman_%282017_film%29.jpg',
name:'Bat Woman',
field:'war',
job:'fighter'
}
]
}
)
https://codepen.io/shankkie/pen/QMmKxz
显示图像时使用 ng-src 而不是 src，
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
演示
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.women = [
{"_id":"5992b00cf8f760203378872f","name":"Ada Lovelace (Ada Byron)","birthDate":"10 de diciembre de 1815","deceaseDate":"27 de noviembre de 1852","field":"Mathematics","job":"Matemática y escritora, creadora del primer algoritmo para programar una máquina","bio":"Su padre fue el conocido poeta George Byron, y su madre, Anne Isabella Noel Byron, poeta y matemática. (...). Ada Byron se refería a sí misma como una científica poetisa y como analista (y metafísica)","image_url":"https://i.pinimg.com/736x/7b/db/e4/7bdbe44fda240b5992b2ce570e273719--kate-winselt-adrienne-bailon.jpg"},
{"_id":"5992b00cf321360203378872f","name":"Jon right (Ada Byron)","birthDate":"10 de diciembre de 1815","deceaseDate":"27 de noviembre de 1852","field":"Mathematics","job":"Matemática y escritora, creadora del primer algoritmo para programar una máquina","bio":"Su padre fue el conocido poeta George Byron, y su madre, Anne Isabella Noel Byron, poeta y matemática. (...). Ada Byron se refería a sí misma como una científica poetisa y como analista (y metafísica)","image_url":"https://media.vanityfair.com/photos/57e15c417dd0d7d276c7cb7c/master/h_590,c_limit/angelina-jolie-vf-december-2014-ss02.jpg"}
];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="woman in women">
<div class= "col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
<a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
</div>
</div>
<!--/.Card-->
</div>
</div>
</body>