0
こんにちは私は角度jを使った小さなCRUDアプリケーションを作成しました。アプリケーションにはちょっとした問題がありますが、問題はあります。 新しいレコードを作成すると、私はそれを編集しようとしましたが、私が作ったポップアップは動作しませんでしたが、私は他のレコードを編集しようとすると、私はそのショーを持って、うまく動作します。これは私が持っている最初の問題です。 私はここでパートを投稿しています。私はjsfiddleを置こうとしましたがうまくいきませんでした。jqueryポップアップのJS JS CRUDテーブル
簡単な説明このアプリではどのようなことをしていますか：私たちは2つのテーブルを持っていますが、そのうちの1つは入力フィールドを持っていますので、編集することができます。 私はPOP UPI BOXを表示するように設計していますが、機能を終えた後に私はそれを将来的にマークすることができます。
最初に私は角度とjqueryの間に矛盾があることが分かりましたので、これを使用しても矛盾はありませんでしたか？
<!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>