0
您好我有一個使用角度js的小型CRUD應用程序編碼，我有一個小問題在應用程序正在做我想要的東西，但我有一個問題： 例如添加一個新的記錄，然後我嘗試編輯彈出這我做不工作，但是當我嘗試編輯任何其他記錄，我有它的節目和工作的罰款。這是我的第一個問題。 我張貼的部分應用程序的一部分在這裏，我試圖把上的jsfiddle沒有工作。角質JS CRUD表與jQuery的彈出
簡單說明這個應用程序做什麼：我們有2個表中的一個有記錄，其中一個有輸入字段，您可以編輯添加刪除保存記錄。 我設計像一個POP UPI框出現的我可以標記它的未來後，我完成功能。
一開始我發現有角和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>