[AngularJS] how to give edit and delete option in row using angular.js?

Mon, 28 Jul 2014 16:37:27 -0700 

 

I make a simple demo in which I generate a row on button click .On each row 
there is a option of "edit" ,delete ..I am able to make in JQM .please 
check fiddle http://jsfiddle.net/Palestinian/4ajeB/ Now I am using using 
angular.js .I need to make same type of pop up screen In using angular.js/ 
bootstrap UI.I am able to generate row on button click.Now I want to show 
menu option as in above fiddle or shown in image .[image: enter image 
description here]

Here is my jsbin url http://jsbin.com/vumarure/1/edit

JS code:
var app = angular.module('plunker', ['ui.bootstrap']);




var ModalDemoCtrl = function($scope, $modal, $log) {

    $scope.items = [];

    $scope.getId = function(item) {
        alert('ID: ' + item.id);

    };

    // This opens a Bootstrap modal
    $scope.open = function() {
        var modalInstance = $modal.open({
            
templateUrl:'https://dl.dropboxusercontent.com/s/digh1zn91rsktyi/dialog.html',
            controller: ModalInstanceCtrl
        });

        modalInstance.result.then(function(newItem) {
            // On modal success

            newItem.id = $scope.items.length + 1;

            $scope.items.push(newItem);

        }, function() {
            // On modal cancelation
        });
    }
};

// This is the modal controllervar ModalInstanceCtrl = function($scope, 
$modalInstance) {

    $scope.name = '';
    $scope.content = '';

    $scope.ok = function() {
                  alert('--')
        var response = {
            'name': $scope.name,
            'content': $scope.content
        };

        $modalInstance.close(response);

    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };};

HTML code:

<!DOCTYPE html><html ng-app="plunker">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
   <link  
href="https://dl.dropboxusercontent.com/s/bbvcx2zc4ocuqzt/bootstrap.min.css?m="; 
rel="stylesheet"/>
    <link  
href="https://dl.dropboxusercontent.com/s/hg36tk1m7rc4gnj/style.css?m="; 
rel="stylesheet"/>
    <link rel="import" href="">


    <script  
src="https://dl.dropboxusercontent.com/s/ofdwftbq0e2p61x/angular.js"; ></script>
    <script  
src="https://dl.dropboxusercontent.com/s/32a1ac9t8r4fguk/ui-bootstrap-tpls-0.10.0.js?m=";></script>
    <script src=""></script></head>
<body ><div ng-controller="ModalDemoCtrl">
    <button class="btn" ng-click="open()">Open Modal</button>

<div class="container">

    <div class="swap-div" ng-repeat="item in items"><ul>
        <li  class="clickTestCaseRow"ng-click="getId(item)" >
        <a href="#" class="left-space">{{ item.id }} | {{ item.name + ' ' + 
item.content  }}</a>
        <a class="move-icon dragrow_h"></a>
        <a class="icon1 edit_delete_copyFunctiontiy_h" ></a>
    </li>
    </ul>
    </div>
    <!--div>

        <ul>
            <li ng-repeat="item in items">
                <a ng-click="getId(item)">{{ item.id }} | {{ item.name + ' ' + 
item.content  }}</a>
            </li>
        </ul>

    </div--></div></div></body>
</html>

CSS:

.editButton {
    background: black;
    width: 100px;
    color: white;
    text-align: center;
    height: 38px;
    position: absolute;
    float: left;
    left: 86%;
    top: -12px;}.three-dot-menu {
    font-size: 2em;
    color: white;
    float: right;
    margin-top: -20px;}.menu-panel {
    display: none;
    color: white;
    background-color: gray;
    float: right;
    width: 200px;
    padding: 15px;}.icon1 {
    background: 
url("https://dl.dropboxusercontent.com/s/2uj9wy8hz0uoovk/Sprite.png#";) 
no-repeat scroll -40px -108px rgba(0, 0, 0, 0);
    display: block;
    height: 19px;
    margin-top: -8px;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 5px;
    cursor:pointer;}.ui-popup {
    margin-top: 0px;
    ! important;
    margin-left: 0px;
    !important;}

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to