コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > イオン性の順序なしリスト

イオン性の順序なしリスト

黄舟
リリース： 2017-02-16 14:15:08
オリジナル
1182 人が閲覧しました

1. 背景の例

イオンの順序なしリストは ul-li 実装を使用し、順序なしリストのコンテンツは AngularJS 割り当てを使用し、スタイルは class="list" と class="item" を使用します


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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <title>ionic之无序列表</title>

        <link rel="stylesheet" href="../css/ionic.css" />

        <script type="text/javascript" src="../js/angular/angular.js" ></script>

        <script type="text/javascript" src="../js/ionic.bundle.js" ></script>

        <script>

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

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

                $scope.uls = ["春季","夏季","秋季","冬季"];

            });

        </script>

    </head>

    <body ng-app="ulApp" ng-controller="ulController">

        <p style="padding: 100px;">

            <ul class="list">

                <li class="item" ng-repeat="u in uls">{{u}}</li>

            </ul>

        </p>

    </body>

</html>

ログイン後にコピー


3. 実装結果

イオン性の順序なしリスト

上記はイオン、順序なしリスト、JavaScript、その他関連の内容です。に注意を払うコンテンツ PHP 中国語 Web サイト (www.php.cn)!


関連ラベル：
ionic，无序列表，JavaScript
前の記事：イオンスタイルチェックボックス 次の記事：イオンスタイルボタン安定
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート