如何使用angular.js

时间:2015-12-29 06:00:42

标签: angularjs

我可以使用angular.js将一个图像插入div中。但是无法将三个图像插入div中。任何人都可以帮我解决这个问题...

我的js代码:

angular.module('Admin', [])
.controller('Home', function($scope) {

  $scope.imageSources = [];

    for (var i = 0; i < 3; i++) {
         $scope.imageSources .push('images/open.jpg');
         $scope.imageSources .push('images/new.jpg');
         $scope.imageSources .push('images/save.jpg');

    }

});

我的HTML代码:

<div id="divone" class="subdiv">
                <div>
                <img width=176 height=99 ng-repeat="imageSource in imageSources track by $index" ng-src="{{imageSource }}">
  </img>
                </div>

            </div>

1 个答案:

答案 0 :(得分:1)

我不明白你为什么要使用for循环。你能解释一下吗?

查看以下代码 -

angular.module('Admin', [])
.controller('Home', function($scope) {

  $scope.imageSources = [];

    $scope.imageSources.push('http://www.imageno.com/thumbs/20151223/af9znxap7p6a.jpg');
     $scope.imageSources.push('http://laurencebonvin.com/wp-content/uploads/2015/10/images-3-200x120.jpg');
     $scope.imageSources.push('http://thumbs.photo.net/photo/18041438-sm.jpg');

});
img{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Admin">
    <div ng-controller="Home" id="divone" class="subdiv">
      <div>
        <img width=176 height=99 ng-repeat="imageSource in imageSources track by $index" ng-src="{{imageSource }}" />
      </div>
    </div>
  </body>

<强>更新

并在图片中添加display: block属性,以便垂直显示图片。