0
Ich habe ein Projekt. Ich liste etwas in HTML auf, es hat Crud-Operationen mit angularjs. Aber ich möchte jetzt Material für diese Listentabelle verwenden.Ich kann nicht importieren Material Design-Projekt angularjs
Dies ist der Entwurf, den ich verwenden wollte:
http://codepen.io/zavoloklom/pen/IGkDz?editors=1100
Meine Index-Seite ist wie folgt aus:
<!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>
Von diesem Material Projekts heruntergeladen I 4-Dateien. 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);
Ich habe nur
var app=angular.module('todoApp',[]);
weil diese js nicht aufgerufen wird.
style.css und normalize.css Ich kann sie hier wegen der Zeichenbeschränkung nicht setzen.
meine AngularJS Datei, 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");
});
I Projekt html mit Mine fusionieren geändert:
<!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>
es einmal geladen meine Liste, in altem HTML-Stil, aber nach, dass ich kann nicht geladen werden.
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.
edit: wenn ich index.js in HTML entfernen, kann ich meine Ausgabe wie im alten Stil sehen.
ich habe diejenigen
bower install bootstrap --save
Bower
Winkel Material installieren