Skip to main content

Posts

Search from list using angularjs

        An array have list of n number items is available in a array object. This object will listout using ng-repeat to list items. We take sample example for counties, we have list item show in the DOM pages. This item is have all counties, i want specific country is available from the list to check using angular filter concept. Filter is apply to search a specific country from the list.         This fetch ng-repeat filter concept using angular, this is fetch a corresponding scope of array object only. This happen DOM itself, no need to write logic from. HTML:    <div ng-app="searchApp"> <div ng-controller="searchCtrl">     Search : <input type="text" ng-model="search"/>     <ul ng-repeat="country in countries | filter:search">         <li>{{country.name}}</li>     </ul>     <p ng-show="(countries | filter:search).lengt...

Angular undefined

An angularjs variable define is have a assign any value or not to find a default properties is angular.isUndefined. I will give a sample logic is undefined checking logic. HTML Code <div ng-app="testApp">     <div ng-controller="TestCtrl">         Variable $scope.name is undefined ==>> {{value1}}         <br/>        Variable $scope.place is undefined ==>> {{value2}}     </div> </div>   AngularJS  var app = angular.module('testApp',[]); app.controller('TestCtrl', function($scope){     $scope.name;     $scope.value1 = angular.isUndefined($scope.name);     $scope.place = "chennai";     $scope.value2 = angular.isUndefined($scope.place); }); Result: Demo

Custom Filter for AngularJS

              Angular directive implements to custom filter concept is apply to filter large data array object will filter specific terms and condition write to yours. Angularjs have some basic filters directive is there. Some more filter need your project means, will try own filter concept is available from angularjs.            Custom filter is more reuse more project from this custom logic. This filter like a library, this write same file or external also. I have sample array Object:   $scope.supplierList =  [         {             "productname": "heliumcylinder",             "catagoriesName": "cylinder"         },         {             "productname": "boost",             "catagoriesName": "cylinder" ...

AngularJS using ng-switch Directive

What is ng-Switch               The ng-Switch directive will used for condition swap the DOM elements. This directive is support the scope of angular variable, The DOM is enable means when the matched ng-switch-when properties is equal. This properties compare into String only.              ng-switch-when case more than matched DOM value also return. It will like unique and duplicated both will return from the ng-switch directive. HTML : <div ng-app="switchApp">     <div ng-controller="SwitchCtrl">         <div ng-switch= "grade">             <div ng-switch-when="A">You got A Grade</div>                         <div ng-switch-when="B">You got B Grade</div>             <div ng-switch-when="C">Yo...

Angular Function Components

AngularJS Function Components :              We focus ng function components. It will support to do a set of basic task to done. This component to manipulate into all set of function to all angular components. Like will do a list of functions angular.lowercase - This function will converted string into lowercase. angular.uppercase - This function will converted string into uppercase. angular.isNumber - Determinate whether a number variable into find. angular.isString - Determinate whether a string variable into find. angular.isArray - Determinate whether a array variable into find. angular.isObject - Determinate whether a Object variable into find. The above List have some basic will refer more into  angularjs. HTML Code: <div ng-app="isApp">     <div ng-controller="isCtrl">         Cos value is {{cos}} <br>         {{firstString}} <br>   ...

ng-Class using angularjs Example

ng-Class in angularJS         ng-Class directive to manage a css properties from the DOM Objects. This directive very support to user presentation css apply dynamically and more response, angularjs used for bootstrap css only. Write different properties from the css file and enable from the controller scope object values. HTML:    <div ng-app="classApp">     <div ng-controller="ClassCtrl">        <span ng-if="showValue">         <p ng-class ="{'red': show, 'green': show1}">{{name}}         </p>         </span>          <span ng-if="!showValue">         <p ng-class ="{'red': show, 'green': show1}">{{name}}         </p>         </span>     </div> </div> Angular Script: ...

Table row data add and delete using angularjs

          Using angularjs will added list of item from the view into table. Angularjs using user name and department details added into table and unwanted or wrongly entered data was delete functionality implemented. HTML Code <div ng-app="appTable">     <div ng-controller="appController">         <input type="text" ng-model="user.name"/><br/>         <input type="text" ng-model="user.dept"/><br/>         <button ng-click="add()"> Add </button>                 <table>             <th>                 <td>S.No</td>                 <td>Name</td>                 <td>Dept</td>       ...