Showing posts with label AngularJS. Show all posts
Showing posts with label AngularJS. Show all posts

Sunday, September 3, 2017

Validation Of Duplicate and Empty Rows in JavaScript

Hi there!

In this blog post you will learn how to avoid (validate) duplication and empty rows in a table when you search and select data from a drop down list.

 So every time when I want to implement this validation at my work place I use a common function to identify the id of the selected data (object) from the drop down list and the id of already stored objects and if they are matching or equal, the function will return true hence not allowing duplicate rows. Below is the common function to avoid duplicate rows.

function containsObject(obj, list) {
    var i;
    for (i = 0; i < list.length; i++) {
        if (list[i].id === obj.id) {
            return true;
        }
    }
    return false;
}


Paste the above function somewhere in your controller and call it in the function used to add data to the table. For an example, suppose you want to add user details to a table and you have a function called "AddUserDetails".

$scope.AddUserDetails = function () {

         var tempList = { } ; 
     
         tempList.id = $scope.selectedUserDetails.id;

         templist.name= $scope.selectedUserDetails.name;

         if ( !containsObject (tempList , storedUserList )

         {
             $scope.storedUserList.push ( tempList ) ;
         }
}


The newly selected object is passed to an array called "tempList" and that object in tempList is checked with every object that is stored in the "storedUserList" array by the common function. If there are matching id's of objects in those two arrays, the function will not push the selected object to the storedUserList array.

----- Happy Coding! -----





Friday, June 30, 2017

Pharmacy Management System - SLIIT Project NodeJs , AngularJs , MongoDB

This is a pharmacy management system for a hospital developed for the 3rd year first semester final project by 4 members. The system will manage all the pharmaceutical operations to provide comprehensive pharmacy services. Basic features of this system would be managing the drug inventory, patient medical profiles, drug dispensing and prescription management. The main users of this system would be the chief pharmacist, assistant pharmacists, and doctors. They have to login to the system in order to use the services available.

The main benefits of this system are reducing manual data entry, reducing human errors, saves time, and increased efficiency. The system is able to generate customized reports on each of the services when required.

Technologies Used 

  • AngularJS for the front end
  • Github 
  • MongoDB ,Mongoose Library,  ExpressJS and NodeJS for the backend.
  • JetBrains WebStorm IDE


Backend is an API running JSON based web services. The front-end application communicates with the back end only using these web services. 

My part was to monitor the drug stock level and decide whether to re-order from drug suppliers via email after the approval of chief pharmacist if drug levels are low and record supplier details.

Click here to download the source code from GitHub.









Thursday, June 29, 2017

ng-model in AngularJS

Models in Angular.JS are represented by the "ng-model" directive. The primary purpose of this directive is to bind the "view" to the "model".

The ng-model attribute is used for,

  • Binding controls such as input, text area and select in the view into the model. 
  • Provide a validation behavior - for example a validation can be added to a textbox that only numeric characters can be entered into the textbox. 
  • The ng-model attribute maintains the state of the control (By state, we mean that the control and the data is bound to be always kept in sync. If the value of our data changes , it will automatically change the value in the control and vice versa)

Monday, May 1, 2017

Simple JavaScript Application with MEAN


In this tutorial we will allow users to enter a first name and a last name that will save to the MongoDB database.

I have used JetBrains WebStorm IDE for this tutorial.

Create a project in Webstorm to get started.
.
First step is to create a file that will contain the code for our Node.js server. So create a file and call it as app.js  and include the below code.



In order for express , body-parser and mongoose to work you should install them to the package,json file as dependencies.

First, go to the directory of the project and run these commands in the command prompt.

1. npm init  - The command prompt will ask you some questions and it will create the package.json                           file.

2.Then run these commands.

         npm install express --save

         npm install mongoose --save

         npm install body-parser --save

After installing them you can open the package.json file and see whether those frameworks have been installed properly.

Create a html file and call it as index.html and paste the below code.

<!DOCTYPE html>
<html>
  <head>
    <title>Intro to Node and MongoDB</title>
  </head>

  <body>
   
    <form method="post" action="/addname">
      <label>Enter Your Name</label><br>
      <input type="text" name="firstName" placeholder="Enter first               name..." required>
      <input type="text" name="lastName" placeholder="Enter last name..."       required>
      <input type="submit" value="Add Name">
    </form>
  </body>
</html>


After doing so save the code and go to the project directory open the command prompt and run node app.js to start our server.

Make sure your mongod is running. 

Open up a browser and navigate to the url

http://localhost:3000

Enter your first name and last name in the input fields and then click the “Add Name” button. You should get back text that says the name has been saved to the database.