안녕하세요 저는 각도 js를 사용하는 작은 CRUD 응용 프로그램을 코딩했는데 응용 프로그램이 원하는 것은 정확히 수행하고 있지만 작은 문제가 있습니다 : 예를 들어 추가 할 때 새 레코드를 만든 다음 편집을 시도합니다. 내가 만든 팝업은 작동하지 않지만 다른 레코드를 편집하려고 할 때 나는 그 쇼가 있고 잘 작동합니다. 이것은 내가 가진 첫 번째 문제입니다. 나는 jsfiddle을 넣으려고했는데 여기서는 파트를 게시하려고합니다.jquery 팝업 각도의 JS CRUD 테이블
간략한 설명이 앱의 기능 : 우리는 기록이 2 개인 테이블 중 하나에 입력 필드가 있으므로 편집 기록을 삭제할 수 있습니다. 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>