угловые таблицы JS CRUD с JQuery всплывающих

Question

угловые таблицы JS CRUD с JQuery всплывающих

0

Привет, у меня есть закодированное небольшое приложение CRUD с использованием угловых js, и у меня есть небольшая проблема, в которой приложение делает то, что я хочу, но у меня есть проблема: когда, например, добавьте новую запись, я попытаюсь ее отредактировать всплывающее окно который я сделал, не работает, но когда я пытаюсь редактировать любую другую запись, у меня есть ее шоу и работаю нормально. это первый вопрос, который у меня есть. Я размещаю часть приложения по частям здесь, я пытался надеть jsfiddle, не работал.

ТАКОЕ ПРОСТОЕ ОБЪЯСНЕНИЕ, ЧТО ЭТОТ ПРИЛОЖЕНИЕ: У нас есть две таблицы из одного из них, у которых есть записи, и у одного из них есть поля ввода, которые вы можете изменить, удалите СОХРАНЕНИЕ ЗАПИСИ. Я ЕСМЬ ПРОЕКТИРОВАНИЕ КАК ПОПОВАЯ КОРОБКА 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 $ 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 $ 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>&nbsp;</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>

hesh 23 июль 2016, в 15:44

Источник

Теги:

jquery

angularjs

popup

crud