ホームページ > ウェブフロントエンド > jsチュートリアル > AngularJS は div の ID を動的に生成します

AngularJS は div の ID を動的に生成します

黄舟
リリース: 2017-03-25 16:12:04
オリジナル
1709 人が閲覧しました

1. 問題の背景

p の id を含む配列オブジェクトを指定して、p 要素を生成し、id に値を割り当てる

2.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>AngularJS动态生成p的ID</title>

        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

        <script>

            var app = angular.module("idApp",[]);

            app.controller("idCon",function($scope){

                $scope.pIds = [

                    {pId:"chartId1"},

                    {pId:"chartId2"},

                    {pId:"chartId3"},

                    {pId:"chartId4"},

                    {pId:"chartId5"}

                ];

            });

        </script>

    </head>

    <body ng-app="idApp" ng-controller="idCon">

        <p ng-repeat="chart in pIds">

            <p id="{{chart.pId}}">{{chart.pId}}</p>

        </p>

    </body>

</html>

ログイン後にコピー

3. 実装結果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<html><head><style type="text/css">@charset "UTF-8";

[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],

.ng-cloak,

.x-ng-cloak,

.ng-hide:not(.ng-hide-animate){

display:none !important;}ng\:form{display:block;}

.ng-animate-shim{visibility:hidden;}

.ng-anchor{position:absolute;}</style>

        <meta charset="UTF-8">

        <title>angularJS动态生成p的ID</title>

        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

        <script>

            var app = angular.module("idApp",[]);

            app.controller("idCon",function($scope){

                $scope.pIds = [

                    {pId:"chartId1"},

                    {pId:"chartId2"},

                    {pId:"chartId3"},

                    {pId:"chartId4"},

                    {pId:"chartId5"}

                ];

            });

        </script>

    </head>

    <body ng-controller="idCon" ng-app="idApp" class="ng-scope">

        <!-- ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">

            <p id="chartId1" class="ng-binding">chartId1</p>

        </p><!-- end ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">

            <p id="chartId2" class="ng-binding">chartId2</p>

        </p><!-- end ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">

            <p id="chartId3" class="ng-binding">chartId3</p>

        </p><!-- end ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">

            <p id="chartId4" class="ng-binding">chartId4</p>

        </p><!-- end ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">

            <p id="chartId5" class="ng-binding">chartId5</p>

        </p><!-- end ngRepeat: chart in pIds -->

     

 

</body></html>

ログイン後にコピー

上記は、p の ID を動的に生成する AngularJS の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.ん)!

関連記事:

AngularJS は div の ID を動的に生成します

AngularJSは動的にコンパイルしてdomに追加するメソッドを実装します

AngularJsはモジュールと依存関係を動的にロードします

AngularJSは動的に生成された要素にイベントをバインドするメソッドを実装します

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート