我有一个项目。我在html中列出了一些东西，它有angularjs的crud操作。但我想现在使用材料作为该列表。
这是我想要使用的设计：
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>
从那个材料项目中，我下载了4个文件。 index.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&business=s%2ekupletsky%40gmail%2ecom&lc=US&item_name=Material%20Design%20Responsive%20Table&currency_code=USD&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
凉亭安装角度材料
答案 0 :(得分：0)
我没有在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注入主应用模块。
var app = angular.module('todoApp', [ 'ngMaterial' ]);