个人中心
gpt4 book ai didi

javascript - 我无法导入 Material 设计元素angularjs

转载 作者：行者123 更新时间：2023-11-28 06:10:30 26 4
gpt4 key购买 nike

我有一个元素。我在 html 中列出了一些东西，它与 angularjs 有粗略的操作。但我现在想为该列表使用 Material 。

这是我想要使用的设计:

http://codepen.io/zavoloklom/pen/IGkDz?editors=1100

我的索引页是这样的:

 <!DOCTYPE html>
<html ng-app="todoApp">
<head><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script></head>
<!--//<head>
   // <script>

      //  var app=angular.module('todoApp',[]);
      //  app.controller('todoController',function($scope, $rootScope) {


                //for (var i = 1; i <= 3; i++) {
                 //  $rootScope.list = '1afsdasasda'
           //         $rootScope.list= "asdasasda"
                    //alert("Rabbit " + i + " out of the hat!");


        //    }
       // })

    //</script>

//</head>-->

<body>
<div class="main-container" ng-controller="todoController">
    <div class="client-area">
        <label fo.table-container tabler="txt"></label>

         <input type="text" ng-model="title" placeholder="enter movie name here">
        <input type="text" ng-model="actors" placeholder="enter movie actors here">
        <!--<p>lsist :{{list}}</p>-->
        <button ng-click="addMovie(title,actors)">Add Movie</button>
        <table id="tab">
            <thead>
            <tr><th>Actors</th><th>ID</th><th>Name</th><th colspan="2">Options</th></tr>
            </thead>
            <tbody>


            <tr ng-repeat="task in tasks">
                <td ng-repeat="(key, val) in task">{{val}}   </td><td>

                <button ng-click="editMovie(task.id)">Edit</button><button ng-click="deleteMovie(task.id)">Delete</button></td>
            </tr>


            </tbody>
        </table>
    </div>
</div>
</body>
</html>

从那个 Material 元素中，我下载了 4 个文件。索引.js:

 * Material Design Responsive Table
 * Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7
 * You can use this table in Bootstrap (v3) projects. Material Design Responsive Table CSS-style will override basic bootstrap style.
 * JS used only for table constructor: you don't need it in your project
 */
var app=angular.module('todoApp',[]);
$(document).ready(function() {

    var table = $('#table');

    // Table bordered
    $('#table-bordered').change(function() {
        var value = $( this ).val();
        table.removeClass('table-bordered').addClass(value);
    });

    // Table striped
    $('#table-striped').change(function() {
        var value = $( this ).val();
        table.removeClass('table-striped').addClass(value);
    });

    // Table hover
    $('#table-hover').change(function() {
        var value = $( this ).val();
        table.removeClass('table-hover').addClass(value);
    });

    // Table color
    $('#table-color').change(function() {
        var value = $(this).val();
        table.removeClass(/^table-mc-/).addClass(value);
    });
});

// jQuery’s hasClass and removeClass on steroids
// by Nikita Vasilyev
// https://github.com/NV/jquery-regexp-classes
(function(removeClass) {

    jQuery.fn.removeClass = function( value ) {
        if ( value && typeof value.test === "function" ) {
            for ( var i = 0, l = this.length; i < l; i++ ) {
                var elem = this[i];
                if ( elem.nodeType === 1 && elem.className ) {
                    var classNames = elem.className.split( /\s+/ );

                    for ( var n = classNames.length; n--; ) {
                        if ( value.test(classNames[n]) ) {
                            classNames.splice(n, 1);
                        }
                    }
                    elem.className = jQuery.trim( classNames.join(" ") );
                }
            }
        } else {
            removeClass.call(this, value);
        }
        return this;
    }

})(jQuery.fn.removeClass);

我只加了

var app=angular.module('todoApp',[]);

因为没有调用这个js。

style.css 和normalize.css 由于字符限制，我无法将它们放在这里。

我的 angularjs 文件，script.js:

var app=angular.module('todoApp',[]);
app.controller('todoController',function($scope,$http,$window){

  //  $window.alert("in todoctrl");
    $scope.addMovie=function(title,actors){
     //   $window.alert("ititle actors "+title+actors)
      //  $scope.title="title clicked "+title;

      //  $scope.actors="actors clicked "+actors;

       // $scope.added="the movie '"+title+"' with those actors '"+actors+"' added successfully";

        $http({
            method: 'POST',
            headers: {

                "Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
                "Access-Control-Allow-Origin": "*"
            },
            url: 'http://localhost:8181/MovieDb/add/'+title+"/"+actors
        }).then(function successCallback() {// $window.alert("in addmoviesuccess");
            //  $scope.check = response.data;

            //    $scope.names = response.data.title;

            $scope.listMovie();

        })

        //$window.alert("bitiste addmovie")
       // $scope.listMovie();
    },

        $scope.deleteMovie=function(id) {
            // $scope.id="id clicked "+id;


             //  $scope.deleted="the movie with id '"+id+"' deleted successfully";
         //    $window.alert("in deletemovie id"+id);

             $http({
             method: 'DELETE',
             headers: {
             "Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
             "Access-Control-Allow-Origin": "*",
             "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"

             },
             url: 'http://localhost:8181/MovieDb/remove/'+id
             }).then(function successCallback() {// $window.alert("in removemoviesuccess");
                 //  $scope.check = response.data;

                 //    $scope.names = response.data.title;

                 $scope.listMovie();

             })


            /* $http.get('http://localhost:8181/MovieDb/remove/'+id).then(function(){

             $http.get('http://localhost:8181/MovieDb/list').then(function successCallback(response) { $window.alert("in listmoviesuccess");
             //  $scope.check = response.data;
             console.log(response);
             $scope.tasks = response.data;
             //    $scope.names = response.data.title;

             }, function errorCallback(response) {$window.alert("in listmovie err");
             //  console.log(response);
             // $scope.check = response;

             }

             //$scope.listMovie();
             );});},*/

        },
        $scope.editMovie=function(id){
            $scope.id="id clicked "+id;

            //  $scope.deleted="the movie with id '"+id+"' deleted successfully";
         //   $window.alert("in edittemovie id"+id);
            $http({
                method: 'PUT',
                headers: {
                    "Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"

                },
                url: 'http://localhost:8181/MovieDb/edit/'+id+title+actors
            }).then(function successCallback() {// $window.alert("in removemoviesuccess");
                //  $scope.check = response.data;

                //    $scope.names = response.data.title;

                $scope.listMovie();

            })
        },

        $scope.listMovie=function(){
      //      var list = 1
        //    $window.alert("in listmovie");
            $scope.check='NO';
        //    $scope.list="list clicked "+list;
         //   $window.alert(" listmovie "+list);
          // $scope.listed="the movies are listing: "+list;
            $http({
                method: 'GET',
                headers: {

                    "Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
                    "Access-Control-Allow-Origin": "*"
                },
                url: 'http://localhost:8181/MovieDb/list'
            }).then(function successCallback(response) { //$window.alert("in listmoviesuccess");
              //  $scope.check = response.data;
                console.log(response);
              $scope.tasks = response.data;
            //    $scope.names = response.data.title;



            }, function errorCallback(response) {//$window.alert("in listmovie err");
              //  console.log(response);
               // $scope.check = response;
            }
            );

            //$window.alert("in listmovie end");
        };
    //$window.alert("after listmovieq");
    $scope.listMovie();

    //$window.alert("after listmovie");

});

我更改了元素的 html 以与我的合并:

<!DOCTYPE html>
<html lang="en" ng-app="todoApp">
<head>
    <meta charset="UTF-8">
    <title>yavuz</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script>
    <script src="index.js"></script>
</head>
<body>


<div id="demo">
    <h1>Material Design Responsive Table</h1>
    <h2>Table of my other Material Design works (list was updated 08.2015)</h2>

    <!-- Responsive table starts here -->
    <!-- For correct display on small screens you must add 'data-title' to each 'td' in your table -->
    <div class="table-responsive-vertical shadow-z-1" ng-controller="todoController">
        <!-- Table starts here -->
        <table id="table" class="table table-hover table-mc-light-blue">
            <thead>

            <tr><th>Actors</th><th>ID</th><th>Name</th><th colspan="2">Options</th></tr>

            </thead>
            <tr ng-repeat="task in tasks">
                <td ng-repeat="(key, val) in task">{{val}}   </td><td>

                <button ng-click="editMovie(task.id)">Edit</button><button ng-click="deleteMovie(task.id)">Delete</button></td>
            </tr>

        </table>
    </div>

    <!-- Table Constructor change table classes, you don't need it in your project -->
    <div style="width: 45%; display: inline-block; vertical-align: top">
        <h2>Table Constructor</h2>
        <p>
            <label for="table-bordered">Style: bordered</label>
            <select id="table-bordered" name="table-bordered">
                <option selected value="">No</option>
                <option value="table-bordered">Yes</option>
            </select>
        </p>
        <p>
            <label for="table-striped">Style: striped</label>
            <select id="table-striped" name="table-striped">
                <option selected value="">No</option>
                <option value="table-striped">Yes</option>
            </select>
        </p>
        <p>
            <label for="table-hover">Style: hover</label>
            <select id="table-hover" name="table-hover">
                <option value="">No</option>
                <option selected value="table-hover">Yes</option>
            </select>
        </p>
        <p>
            <label for="table-color">Style: color</label>
            <select id="table-color" name="table-color">
                <option value="">Default</option>
                <option value="table-mc-red">Red</option>
                <option value="table-mc-pink">Pink</option>
                <option value="table-mc-purple">Purple</option>
                <option value="table-mc-deep-purple">Deep Purple</option>
                <option value="table-mc-indigo">Indigo</option>
                <option value="table-mc-blue">Blue</option>
                <option selected value="table-mc-light-blue">Light Blue</option>
                <option value="table-mc-cyan">Cyan</option>
                <option value="table-mc-teal">Teal</option>
                <option value="table-mc-green">Green</option>
                <option value="table-mc-light-green">Light Green</option>
                <option value="table-mc-lime">Lime</option>
                <option value="table-mc-yellow">Yellow</option>
                <option value="table-mc-amber">Amber</option>
                <option value="table-mc-orange">Orange</option>
                <option value="table-mc-deep-orange">Deep Orange</option>
            </select>
        </p>
    </div>
    <div style="width: 45%; display: inline-block; vertical-align: top; margin-left: 30px;">
        <h2>Description</h2>
        <p>Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7</p>
        <p>You can use this table in Bootstrap (v3) projects. Material Design Responsive Table CSS-style will override basic bootstrap style.</p>
        <p class="mdt-subhead-2"><strong>Donate:</strong> You can support me via <a class="paypal" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=s%2ekupletsky%40gmail%2ecom&amp;lc=US&amp;item_name=Material%20Design%20Responsive%20Table&amp;currency_code=USD&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted">PayPal</a>, <a class="webmoney" href="https://funding.webmoney.ru/material-design-iconic-font/donate">WebMoney</a> or <a class="gratipay" href="http://gratipay.com/zavoloklom/" target="_blank">Gratipay</a></p>
    </div>
</div>
</body>
</html>

它有一次以旧的 html 样式加载了我的列表，但之后我无法加载。

ng-controller="todoController" I put this to anywhere but it doesn't work. I put alert to script.js if it is invoked but still it is not invoked. I can't understand why.

编辑:当我删除 html 中的 index.js 时，我可以看到旧样式的输出。

我做了那些

bower install bootstrap --save

bower 安装 Angular Material

最佳答案

我在您的 html 中没有看到对所需 .js 和 .css 文件的引用。

你需要:
1. angular-material.js(或angular-material.min.js)
2. angular-material.css(或angular-material.min.css)
3. angular-material.layouts.css(或angular-material.layouts.min.css)

您可能还需要:
1. angular-animate.js(或angular-animate.min.js)
2. angular-aria.js(或angular-aria.min.js)

最后，您应该将 ngMaterial 注入(inject)到您的主应用模块中。

var app = angular.module('todoApp', [ 'ngMaterial' ]);

关于javascript - 我无法导入 Material 设计元素angularjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36197195/

26 4 0
文章推荐： javascript - 垂直视差无法使用 Parallax.js
文章推荐： javascript - 使用 Javascript 在 Html 中将 Xml 数据或 Json 对象预览为 XML 树
文章推荐： javascript - 在多个 Controller 中使用 AngularJs 服务
文章推荐： css - 适合各种尺寸的各种div元素，以适应整个容器宽度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com