Hallo, ich habe eine kleine CRUD-Anwendung mit eckigen js codiert und ich habe ein kleines Problem in der Anwendung tut was ich will genau, aber ich habe ein Problem: wenn zum Beispiel eine neue Aufnahme, dann versuche ich es zu bearbeiten das Pop-up, das ich gemacht habe funktioniert nicht, aber wenn ich versuche, einen anderen Datensatz zu bearbeiten, habe ich seine Shows und funktioniert gut. Das ist das erste Problem, das ich habe. Ich posten die Anwendung Teil für Teil hier versuchte ich jsfiddle legte nicht funktioniert.angular JS CRUD Tabellen mit jquery Pop-up
SO EINFACHE ERKLÄRUNG, WAS DIESE APP TUN: WIR HABEN 2 TABELLEN EINER VON IHNEN HAT DIE AUFZEICHNUNGEN UND EINER VON IHNEN HAT EINGANGSFELDER, DIE SIE ADD DELETE SAVE RECORDS BEARBEITEN KÖNNEN. ICH BIN DESIGNS WIE EINE POP UPI BOX ZU ERSCHEINEN, KANN ICH IN DER ZUKUNFT NACH DER FUNKTIONALITÄT ZIEHEN.
am anfang fand ich, dass es einen konflikt zwischen angular und jquery gibt, also habe ich diese keine konflikt-sache benutzt, ist es der richtige weg das zu tun?
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>::Angular_CRUD::</title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!-- Angular CDN-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
$('.pop-up').hide(0);
//$('.pop-up-container').hide(0);
$('.pop-up-button').click(function(){
// $('.pop-up-container').show(0);
$('.pop-up').fadeIn(300);
$('.pop-up-button').hide(0);
$('#table1').hide(0);
});
$('.edit').click(function(){
// $('.pop-up-container').show(0);
$('.pop-up').fadeIn(300);
$('.pop-up-button').hide(0);
$('#table1').hide(0);
});
$('.pop-up span').click(function() {
// $('.pop-up-container').hide(0);
$('.pop-up').hide(0);
$('.pop-up-button').show(0);
$('#table1').show(0);
});
$('.add').click(function() {
// $('.pop-up-container').hide(0);
$('.pop-up').hide(0);
$('.pop-up-button').show(0);
$('#table1').show(0);
});
$('.save').click(function() {
// $('.pop-up-container').hide(0);
$('.pop-up').hide(0);
$('.pop-up-button').show(0);
$('#table1').show(0);
});
});
// Code that uses other library's $ can follow here.
</script>
</head>
<body ng-controller="providerController">
<p class="pop-up-button">CLICK ME I AM A POP UP</p>
<table id="table1" cellpadding="2" cellspacing="2" border="1">
<tr>
<th>Id</th>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Option</td>
</tr>
<tr ng-repeat="provider in listProviders">
<td>{{provider.id}}</td>
<td>{{provider.name}}</td>
<td>{{provider.price}}</td>
<td>{{provider.quantity}}</td>
<td>
<a href="#" ng-click="del(provider.id)">Delete</a> |
<a class="edit" href="#" ng-click="selectEdit(provider.id)">Edit</a>
</td>
</tr>
</table>
<div class="pop-up">
<span>x</span>
<div class="pop-up-text">
<h3>Providor Information</h3>
<table>
<tr>
<td>Id</td>
<td><input type="text" ng-model="id"></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" ng-model="name"></td>
</tr>
<tr>
<td>Price</td>
<td><input type="text" ng-model="price"></td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" ng-model="quantity"></td>
</tr>
<tr>
<td> </td>
<td>
<input class="add" type="button" value="add" ng-click="add()">
<input class="save" type="button" value="save" ng-click="edit()">
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var myapp = angular.module('myapp',[]);
myapp.controller('providerController', function($scope){
// FIRST SCOPE PRESENTING
$scope.listProviders = [
{id: 'p01', name:'Product 1', price:10, quantity:20},
{id: 'p02', name:'Product 2', price:20, quantity:30},
{id: 'p03', name:'Product 3', price:30, quantity:40},
{id: 'p04', name:'Product 4', price:40, quantity:50}
];
// FIFTH SCOPE SAVING EDIT
$scope.edit = function(){
var index = getSelectedIndex($scope.id);
$scope.listProviders[index].name = $scope.name;
$scope.listProviders[index].price = $scope.price;
$scope.listProviders[index].quantity = $scope.quantity;
};
// FOURTH SCOPE ADDING
$scope.add = function(){
$scope.listProviders.push({
id:$scope.id, name:$scope.name, price:$scope.price, quantity:$scope.quantity
});
$scope.id = '';
$scope.name ='';
$scope.price ='';
$scope.quantity ='';
};
// THIRD SCOPE EDITING
$scope.selectEdit = function(id){
var index = getSelectedIndex(id);
// alert(index);
var provider = $scope.listProviders[index];
$scope.id = provider.id;
$scope.name = provider.name;
$scope.price = provider.price;
$scope.quantity = provider.quantity;
};
// SECOND SCOPE DELETING
$scope.del = function(id){
var result = confirm('are you sure?');
if(result===true){
var index = getSelectedIndex(id);
// alert(index);
// THIS FUNCTION ADD A NEW ELEMENT TO THE ARRAY AND REMOVE OLD ELEMENT FROM AN ARRAY
$scope.listProviders.splice(index, 1);
}
};
function getSelectedIndex(id){
for(var i=0; i<$scope.listProviders.length; i++)
if($scope.listProviders[i].id==id)
return i;
return -1;
}
});
</script>
</body>
</html>