Checkbox Toggling in Angularjs

0

Requirement :

We need to make a checkbox for every option available in our $scope object and preserve the option selected for further use.

Step 1:

Store your required option list in a $scope.

Example : 

$scope.options : SalesOrderNos

In our example the SalesOrderNos have a list of sales order, on which we require the checkbox.

Step2: Declare another scope variable to store the selected options values

$scope.selection = [ ];

Step 3 : use ng-repeat to repeat our sales order list

<tr ng-repeat="s in options">

  <td><input type="checkbox" value="{{s.SalesOrderNo}}" ng-checked="selection.indexOf(s.SalesOrderNo) > -1" ng-click="toggleSelection(s.SalesOrderNo)"/></td>

<td>{{s.SalesOrderNo}}</td>

</tr> 

Step 4 : On our js page to capture the toggle of checkbox

  //toggle selection for a given sales order by salesOrderNo

    $scope.toggleSelection = function toggleSelection(SalesOrderNo) {

        var idx = $scope.selection.indexOf(SalesOrderNo);

        //is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        }
            //is newly selected
        else {
            $scope.selection.push(SalesOrderNo);
        }
    };

Step 5:  Now, try console.log($scope.selection)

The selected options must be in the selection array.

Read More »

Angular Material Auto - Complete

1

 Angular Material is the reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design.

To use Angular- Material, required Angular files are :

• angular-material.min.css
• angular-material.min.js
• angular.min.js
• angular-animate.min.js
• angular-aria.min.js
• angular-messages.min.js

CDN :-

• https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js
• https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js
• https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js
• https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js
• https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc1/angular-material.js

Angular material provide us with its own tags that help us to perform DOM Operation in an easy fashion. One of such tag is md-autocomplete.

md-complete tag

md-complete tag has its child tag 

<md-item-template> : In this the search items results are shown.

<md-not-found> : Here text is provided when search does not match.

Our HTML Page :

<div ng-controller="AutoCompleteController as ctrl" layout="column" ng-cloak="" ng-app="MyApp">

<md-content class="md-padding">

<form ng-submit="$event.preventDefault()">

<p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>

<md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText"

md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?">

<md-item-template>

<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>

</md-item-template>

<md-not-found>

No states matching "{{ctrl.searchText}}" were found.

<a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>

</md-not-found>

</md-autocomplete>

<br/>

<p>By default, <code>md-autocomplete</code> will cache results when performing a query. After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>

</form>

</md-content>

</div>

Our JS Page:

'use strict';

angular

.module('MyApp', ['ngMaterial', 'ngMessages'])

.controller('AutoCompleteController', AutoCompleteController);

function AutoCompleteController() {

var self = this;

self.states = loadAll();

self.querySearch = querySearch;

function querySearch(query) {

var results = query ? self.states.filter(createFilterFor(query)) : self.states;

return results;

}

function loadAll() {

var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\

Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\

Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\

Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\

North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\

South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\

Wisconsin, Wyoming';

return allStates.split(/, +/g).map(function (state) {

return {

value: state.toLowerCase(),

display: state

};

});

}

function createFilterFor(query) {

var lowercaseQuery = angular.lowercase(query);

return function filterFn(state) {

return (state.value.indexOf(lowercaseQuery) === 0);

};

}

}

Code Explanation:

angular

.module('MyApp', ['ngMaterial', 'ngMessages'])

.controller('AutoCompleteController', AutoCompleteController);

Angular module named MyApp is made with ngMaterial and ngMessages dependency.

Our Controller name is AutoCompleteController

function AutoCompleteController() {

var self = this;

self.states = loadAll();

self.querySearch = querySearch;

On controller load we are calling loadAll function, and querySearch and stored them to states and querySearch.

function createFilterFor(query) {

var lowercaseQuery = angular.lowercase(query);

return function filterFn(state) {

return (state.value.indexOf(lowercaseQuery) === 0);

};

}

This filter is used so that our search works for lower and upper case both and in our return function we are finding those states which has that search term at index 0. Means the first character.

Our End Result Will be Like :

Read More »

Starting with SignalR Part 1 (Overview)

0

SignalR, a framework that facilitate asynchronous data transfer between the server and the clients in real time.

Basically, SignalR isolates us from low-level details, giving us the impression of working on a permanently open persistent connection. To achieve this, SignalR includes components specific to both ends of communication, which will facilitate message delivery and reception in real time between the two.

In a way that is transparent to the developer, SignalR is in charge of determining which is the best technique available both at the client and at the server( Long Polling, Forever Frame, Websockets...) and uses it to create a underlying connection and keep it continuously managing disconnections and reconnections when necessary. We will only see and use permanently open connection, and SignalR will make sure that everything works correctly in the backstage. Thus, with this framework, we say that we work on a virtual persistent connection.

SignalR also includes a messaging bus capable of managing data transmission and reception between the server and the clients connected to the service. That is, server is able to keep track of its clients and detect their connections and disconnections, and it will also have mechanisms to easily send messages to all clients connected or part of them, automatically managing all issues concerning communications (different speeds, latency, errors … ) and ensuring the delivery of messages.

Read More »

ng-change

0

ng-change can be used to capture any action performed by the user with input type tag, select tag.

Using ng-change with input type :

<input type="number" class="form-control" ng-change="calculate()" />

Here ng-change modal will go to calculate() in the controller of this page at the time of change text in the textbox. This is same as writing a onTextChange() action on the textbox.

On Controller:

$scope.calculate = function () {

//Do the required operation here.

}

Using ng-change with select tag :

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>

Here the ng-change will be called when user will select an option. 

Read More »

Beginning-with-database-approach-Part 3

0

In Part 2 of beginning with entity framework we did CRUD operation using entity framework. Now, there are few tips for using entity:

How to update your Entity Data Model (.edmx)?

Open your .edmx file >Right click >Select update from database

You will get this window:

If you have added new table, views, stored procedure in database.. Select those and select Finish.

Same to update and delete from model.

Providing Default values?

In SQL we can provide default value, to a column, this default value is not automatically updated to our entity model. So we have to manual add the default value in our entity model also.

Select the table column from entity designer for which default value is to be provided.

Right click on the column>Properties >Default value :- Provide your value

#Stored procedure of SQL behave as function in Entity framework.

Read More »

Beginning-with-database-approach-Part 2

0

In our first part we have created our .edmx file with the help of ADO.net Entity Data Model using database approach.

Now, it’s time to start using our entity Framework to do SQL operation.

Before that,  if you are using visual studio 2012 or later, go to solution explorer, find your .edmx file and delete  .tt extension files from there.

After that go to .edmx.diagram file.

Right click > Properties > Code Generation Strategy= None . Change it to Default.

Now we are ready with our entity.

In entity framework, our tables behave as C# class and column as class properties.

Performing Insert operation using entity Framework

On some button click if we need to add that data to our database object, then we follows as  :

First Make an object of your entity, by default it should be as “your database name”Entitites.

Example :

db_OrderMangEntities db = new db_OrderMangEntities();

Now make object of table in which data is to be store,

Syntax :

TableName tbl = new TableName();

After that use this tbl instance to add data to the properties,

Example:

tbl_Vender tbl = new tbl_Vender();

            tbl.VenderName = "Kumar";

            tbl.VenderContact = 656789

When we have provided values to the properties to the table object, its time to save this into database for this,

Do,

db.tbl_Vender.AddObject(tbl);

Here, db is our entity object in which we have tbl_vendor (our table). The “AddObject”(or Add, depending upon your version) is the method provided by the entity to insert data into database.

After adding the data it’s time to tell our database to save our changes, for this write,

db.SaveChanges();

This will add a row to our table with the provided data.

Complete code will look like :

protected void btnRegister_Click(object sender, EventArgs e)

        {

            db_OrderMangEntities db = new db_OrderMangEntities();

            tbl_Vender tbl = new tbl_Vender();

            tbl.VenderName = "Kumar";

            tbl.VenderContact = 656789;

            db.tbl_Vender.AddObject(tbl);

            db.SaveChanges();

        }

Update Object in Entity:

To update any row, we need to first find that row.

For that we have to use LINQ with enitites.

The Syntax will be :

tbl_Vender tbl1 = db.tbl_Vender.Where(i => i.VenderName == "Kumar").First();

Here I am searching with vendorName you can use any property.

After this we will have tbl1 as the object of that row which is to be updated.

Now assign the new values to the tbl1 object.

For Example :

tbl1.VenderName = "Gaurav";

After this just tell the database to save our changes.

db.SaveChanges();

Note , here we are not adding another object to the table as it will add another row, but we just need to update it.

 Deleting object:

Same first we need to find the row to be deleted .

Now write,

db.tbl_Vender.DeleteObject(tbl1);

and then the same save changes to database.


Beginning-with-database-approach-part-3

Read More »

Beginning with database approach Part-1

0

This approach could be used with any previously build database, that why known as database model approach. It will help us to communicate with our database, with its predefined functions, and giving our C# code more power in terms of SQL too.

Step 1: Right- Click on the project main file.

Project Name > Add > New Item > ADO.NET Entity Data Model

Provide a relevant Name.

Step 2: Choose Modal Contents :

Select Generate from database > then Next >

Step 3:  : Make a new Connection to connect to database : (connection string)

Provide your database server name and select the database name, that you want to connect.

Click Next.

Step 4:  Select the table, views, stored procedure that are required from database, or select all.

Click > Finish.

Your entity Model is created:

You should have got your database tables in GUI format as below :

Beginning-with-database-approach-part-2

Beginning-with-database-approach-part-3

Read More »