Showing posts with label Angularjs xeditable. Show all posts
Showing posts with label Angularjs xeditable. Show all posts

Angularjs Mouse Right Click Custom Menu

 Angularjs Mouse Right Click Custom Menu

Hi Today Discussed Angularjs Mouse Right Click Custom Menu Normally Angularjs Site is very nice look and pretty site and fast loading and in build ajax and animated pretty site or application. So mouse right click customized is another pretty and security proposed and user friendly menu click so how to this task handle follows code.

Angularjs Mouse Right Click Custom Menu
Angularjs Mouse Right Click Custom Menu

First You used node server or bower is identified and then install menu follows code.

npm install angular-bootstrap-contextmenu
or
bower install angular-bootstrap-contextmenu
Inject reference or Add a reference to contextMenu.js. In your app config add ui.bootstrap.contextMenu as a dependency module.

reference

Your Index Page Main Controller write this code follows and then main controller behind div add

context-menu="menuOptions" this content.

AppCtrl Controller.js

$scope.menuOptions = [
    ['Select', function ($itemScope, $event, modelValue, text, $li) {
        $scope.selected = $itemScope.item.name;
    }],
Downlink Link : Click Here

Angularjs table ng-repeate Simple Pagination

Angularjs table ng-repeate Simple Pagination

Hi Today discussed Angularjs table ng-repeate Simple Pagination Angularjs api web services data provide table ng-repeate custom features sorting and filter and Pagination added follows code.

html Files
Angularjs table ng-repeate Simple Pagination
Angularjs table ng-repeate Simple Pagination


<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
            {{item}}
        </li>
    </ul>
    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button>
    {{currentPage+1}}/{{data.length/pageSize}}
    <button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
</div>

controller.js

var app=angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    for (var i=0; i<50; i++) {
        $scope.data.push("Item "+i);
    }
}

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

Angularjs LocalStorage Vs Session Storage Vs Cookies

Angularjs LocalStorage Vs Session Storage Vs Cookies


Hi Viewers Today Discussed Angularjs LocalStorage Vs Session Storage Vs Cookies include ngstorage  means angular storage. I'm working a new app where I need to keep some data during the user is logged in and I have that question,what is the difference among localstorage and sessionstorage.

Angularjs LocalStorage Vs Session Storage Vs Cookies
Angularjs LocalStorage Vs Session Storage Vs Cookies

Angularjs LocalStorage and SessionStorage are both  Called Web Storage and features of HTML5.

localStorage stores information as long as the user does not delete them.

sessionStorage stores information as long as the session goes. Usually until the user closes the tab/browser.

cookies are simply cookies, which are supported by older browsers and usually are a fallback for frameworks that use the above mentioned WebStorages.

sessionStorage : The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. it is not available when a file is run locally.

Data stored in the sessionStorage object is accessible only from the page that initially stored the data; so this doesn't meet your requirement

localStorage : Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser’s cache.

Angularjs xeditable

Angular-xeditable – Edit in place for AngularJS

Angular xeditable
Angularjs xeditable
Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements.
Such technique is also known as click-to-edit or edit-in-place. Angularj file upload

Controls & Features

text
textarea
select
checkbox
radio
date
time
html5 inputs
typeahead

How to set x-editable select box

Angularjs xeditable is key features select box is confused so i mentioned select box xeditable code follows and database insert data
<span editable-select="active.ClientQueries" e-name="ClientQueries" e-ng-options="s for s in main.states">{{ (states | filter:{value: active.ClientQueries})[0].text || 'Not set' }}</span>
AngularJS X-Editable table row validation

<tr ng-repeat="user in pagedTel.data | filter:searchField | orderBy:sortType:sortReverse" ng-if="pagedTel.data.length > 0">
    <td>
        <div ng-show="rowform.$visible">
            <form editable-form name="rowform" onaftersave="upd_tel($data, user.id)">
                <button type="submit" class="bt-t bt-suc"><i class="fa fa-check"></i></button><button type="button" ng-click="rowform.$cancel()" class="bt-t bt-dan"><i class="fa fa-times"></i></button>
            </form>
        </div>
        <div ng-show="!rowform.$visible">
            <a class="bt-t bt-war"><i class="lgicon icon icon-pencil" ng-click="rowform.$show()"></i></a><a class="bt-t bt-dan"><i class="lgicon icon icon-trash" id="{{user.id}}" ng-click="openDialog(user.id)"></i></a>
        </div>
    </td>

    <td>
        <span editable-text="myTel.ds_contato" e-name="ds_contato" e-form="rowform" onbeforesave="checkData($data)" e-required>
            {{user.ds_contato}}
        </span>
    </td>

    <td>
        <span editable-text="myTel.num_tel" e-name="num_tel" e-form="rowform" e-mask="(99) 9?9999-9999" e-required onbeforesave="checkTel($data)">
            {{user.num_tel}}
        </span>
    </td>
</tr>
Controller


$scope.checkData = function(data) {
    if (data == null) {
        return "Required field";
    };
};

$scope.checkTel = function(data) {
    if (data == null) {
        return "Required field";
    } else if ($scope.rowform.user.$invalid) {
        return "Invalid field";
    }
};
Example xeditable Code:

First include Angularjs in your project
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
Second Include Bootstrap css
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
Third Install angular-xeditable bower
bower install angular -xeditable
Include angular xeditable into your project
<link href="bower_components/angular-xeditable/dist/css/xeditable.css" rel="stylesheet">
<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
Define angular app and add xeditable to depandencies
<html ng-app="myapp">
var app = angular.module("myapp",["xeditable"]);
Set theme in app.run:
app.run(function(editableOptions) {
  editableOptions.theme = 'bs3'; });
view.html
<div ng-controller="Ctrl">
  <a href="#" editable-text="user.name">{{ user.name || "empty" }}</a>
</div>
Controller.js
app.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'Dev2tricks'
  };  
});