angularjs

怎么用angularJS简单的循环显示一个数组，放的是图片的地址。

            <li>
                <img src="img/siv_img1.jpg" />
                <img src="img/siv_img2.jpg" />
                <img src="img/siv_img3.jpg" />
                <img src="img/siv_img4.jpg" />
                <img src="img/siv_img5.jpg" />
            </li>

<img ng-src="item.imgsrc" />

</li>

Angularjs中有内置指令ng-repeat

Angular1

<body ng-app="myApp">
<div ng-controller="MyCtrl">
    <img ng-repeat="img in images" ng-src="{{img.src}}">
</div>
<script src="node_modules/angular/angular.js"></script>
<script>
    angular.module('myApp',[])
            .controller('MyCtrl',function ($scope) {
                $scope.images=[
                    {
                        src: 'http://http://image.test.com/1.jpg'
                    },
                    {
                        src: 'http://http://image.test.com/2.jpg'
                    },
                    {
                        src: 'http://http://image.test.com/3.jpg'
                    }
                ];
            });
</script>
</body>

Angular2


import {
    Component,
    OnInit
} from 'angular2/core';


interface Image {
    src:string;
}

@Component({
    selector: 'my-app',
    template: `
        <div>
            <img [src]="img.src" *ngFor="#img of images">       
        </div>
    `
})
export class AppComponent implements OnInit {
    images:Image[];

    ngOnInit() {
        this.images = [
            {
                src: 'http://http://image.test.com/1.jpg'
            },
            {
                src: 'http://http://image.test.com/2.jpg'
            },
            {
                src: 'http://http://image.test.com/3.jpg'
            }
        ]
    }
}

【热门文章】