Question

我正在尝试将模板调整到我的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>

我强迫图像具有相同的大小，但我还希望在此视图中仅显示部分图片，然后在详细图片中显示完整图像。

谢谢！

Answer 1

在显示图像时使用ng-src而不是src，

<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">

<强>样本

＆＃13;

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"}
  
  ];
});

＆＃13;

<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>

＆＃13;

Answer 2

看看这个，让我知道这是否是你想要的，

<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

AngularJS ng-repeat和bootstrap以显示来自DB的列中的项目

2 个答案: