你好我有一个使用角度js编码的小型CRUD应用程序,我有一个小问题,应用程序正在做我想要的但我有一个问题: 当例如添加一条新记录然后我尝试编辑它弹出我所做的不起作用但当我尝试编辑任何其他记录我有它的节目和工作正常。这是我的第一个问题。 我在这里发布应用程序部分我试图穿上jsfiddle不起作用。
如此简单的解释这个应用程序做了什么:我们有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>
答案 0 :(得分:0)
angualrJs有它的内置JQuery,叫做“jqLite”,由“angular.element”引用。
有关详细信息,请参阅https://docs.angularjs.org/api/ng/function/angular.element