0
私はプロジェクトを持っています。私はhtmlで何かをリストアップしています、それはangularjsとのcrud操作を持っています。しかし、私はそのリストテーブルのために今材料を使いたいです。私のインデックスページはそのようなものです私はインポート材料設計プロジェクトangularjsを傾ける
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：これが呼び出されない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',[]);
を追加しました。
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スタイルではなく、そのIの後、私のリストをロード読み込めません。
編集：htmlでindex.jsを削除すると、出力が古いスタイルで表示されます。
私はあなたのhtmlで必要なの.jsや.cssファイルへの参照が表示されていない角度-材料