Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x

AngularJS

400

Solutions

276

Contributors

AngularJS is an open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Share tech news, updates, or what's on your mind.

Sign up to Post

And what is Semantic Versioning?

Thanks
0
Amazon Web Services EC2 Cheat Sheet
Amazon Web Services EC2 Cheat Sheet

AWS EC2 is a core part of AWS’s cloud platform, allowing users to spin up virtual machines for a variety of tasks; however, EC2’s offerings can be overwhelming. Learn the basics with our new AWS cheat sheet – this time on EC2!

I am a .NET Full Stack developer with UI experience, but little on Angular.

What's the best version to learn?

I want to learn that to maximize my value in the job market.

Thanks.
0
Someone has suggested that I do a client side only rest api implementation using Angular or another MV* frontend framework. However, it is my understanding that client side only is not safe to have sensitive information flowing back and forth to API, like the API KEY.

Is there an external source known to someone here that could be used to fetching credentials and enforcing CORS - cross-origin resource sharing?

Any tips or best practices or advice on this ask would be appreciated.
0
It may appear a silly question, but I just to be sure I don't get into any difficulites. I am learning ReactJS and Angular and I find authors from different books and Tutorials using different CodeEditors and IDE's. To keep my learning experience/environment consistent with the course I may be doing (and also to experiment with different ones) , I would like to install all of the these Editors and IDE's on my Mac and Window Machines. I would like to know if it is OK to install all of these on the same machine side by side or can this create any conflicts or problems.
A related question is that if you have more than one of these editors on the same machine, can you open the same project  (ReactJS or Angular) in different editors. Thank you for your help.
0
Hello!

I am currently changing the code for a Web application (written with Angular.JS and the ionic framework with jQuery) that has a page generator. This generator page writes the image information into a relational database (phpMyAdmin, 10.1.22-MariaDB). What I have to do is to add a new form to this app where the user selects an existing page from a list & opens it in the page generator.

The <div> element that holds the image object is created in the page generator with a $templateCache.put command and has the following form:

"$templateCache.put("ivm-image-builder/templates/image-builder.html", "
	"<div class=\"hero\"\n" +
		[…]
"		<div class=\"hero-image\" ivm-bg-axis=\"y\" ivm-bg-drag ivm-bg-disabled=\"disabled\" ng-style=\"imageOptions.style\" ngf-background=\"ngModel\"></div>\n" +
		[…]

Open in new window


The code runs properly when creating a new page. When using this generator page for an existing page that had been saved in the database, I can easily fill the text fields (like "page name" or "URL" (a text field)), but I wonder how the images can be displayed properly. I wonder if a longtext field or a BLOB is the appropriate field type in the DB.

My question is: How can I display an image received from the database, which has no associated URI & is not saved at any accessible location? Is it the right way to associate the image information with the ngModel tag?
0
I'm going through a basic Angular tutorial and there's a portion of it that I can't get to work and I don't know why.

Head out to http://brucegust.com/adm/angular/ and check it out. It's the very last "application."

Here's the code:

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

Open in new window


It should say, "The name is John" and it doesn't.

I'm looking at Google Chrome and there's nothing in the Console that would give me an indicator as to where I'm blowing it.

Any ideas?

Thanks!
0
I had this question after viewing Angular - difference between these 2 pagination methods.

I'm following this example (please scroll down pipe/ajax plugin section here http://lorenzofox3.github.io/smart-table-website/)

In the related question above, I want to do this
"From the page number you can calculate from which index your query will start returning data up to your page limit."

I think I have 2 issues. One is how to get the next index and second...I think I call the database every time user clicks on the next page.

I'll go step by step

1. I changed the stored proc to have row_number. Suppose this. I call it with 1 and 50 and get 50 rows.
create procedure usp_test
@start int,
@end int
as
begin
Select * From( Select *,ROW_NUMBER() OVER(ORDER BY Table.Col) row FROM TableName ) R WHERE row BETWEEN @srart AND @end

end

Open in new window


2. Razor has this (just like the Smart table example)

<table class="table" st-pipe="callServer" st-table="mc.displayedCollectionTest">

Open in new window


3. controller.js has this like the example

 $scopr.callServer = function callServer(tableState) {

    ctrl.isLoading = true;

    var pagination = tableState.pagination;

    var start = pagination.start || 0;     // This is NOT the page number, but the index of item in the list that you want to use to display the table.
    var number = pagination.number || 10;  // Number of entries showed per page.

    cContactService.getPage(start, number, tableState).then(function (result) {
      $scope.displayedCollectionTest = result.data;
      tableState.pagination.numberOfPages = result.numberOfPages;//set the number of pages so the pagination can update
      
    });
  };

Open in new window


4. Issue 1: Here, I don't think this is correct. Database keeps getting called but should it? the example has randomsItems as their datasource but not called on each "page" click to go to next page

In ContactService.js


Open in new window

1
I'm using Smart Table. http://lorenzofox3.github.io/smart-table-website/

Please scroll down to "Client side Pagination" and "pipe/ajax plugin"

In both methods, the database call to get the dataset has to be done upfront...is that correct? What does "pipe/ajax plugin" offer as far as performance that "client side pagination" doesn't offer? I think if both have to get the dataset upfront, there shouldn't be a difference as far as performance but not sure.
0
I have a smart table (followed this example)  http://www.marcorpsa.com/ee/t2444.html

and added paging using this example https://www.js-tutorials.com/javascript-tutorial/angularjs-smart-table-example-demos/

Now, I have 20,000 rows and my paging is 150 pages. But, I bring back the entire 20,000 rows upfont...when the page loads, then page.  Page is very slow. I'm wondering if I shouldn't bring back the 20,000 rows all at once.

I'm using a stored proc and the stored proc itself takes about a couple of seconds. It's when I bind the data to the smart table that takes a few mins.
0
The following is the data I intend to to render to in my angularjs U.I.:

[{"id":1,"name":"T-Shirt","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","category":[{"id":1,"name":"Men","item_id_fk":1,"parent_id":null,"createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","child":[{"id":3,"name":"Long Sleeve","item_id_fk":1,"parent_id":1,"createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27"},{"id":4,"name":"Short Sleeve","item_id_fk":1,"parent_id":1,"createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27"}]},{"id":2,"name":"Women","item_id_fk":1,"parent_id":null,"createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","child":[{"id":5,"name":"Long Sleeve","item_id_fk":1,"parent_id":2,"createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27"},{"id":6,"name":"Short Sleeve","item_id_fk":1,"parent_id":2,"createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27"}]}]},{"id":2,"name":"Jeans","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","category":[]}]

Open in new window


I intend to expand or collapse the category and also the child but so far I have managed to displayed the item without the category and child in the following manner:

<div class="col-xs-12">

	<div class="row">
		<div class="col-md-12 margin-tb">
			<div class="pull-left">
				<h1>Listing Category</h1>
			</div>
			<div class="pull-right">
				<input type="button" 

Open in new window

0
Interactive Way of Training for the AWS CSA Exam
Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

I have the following angular code:

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

myApp.controller('myAppController', ['$scope', function ($scope) {

    $scope.displayData = [{
        column1: 'row1 column1',
        column2: 'row1 column2',
        column3: 'row1 column3',
        column4: 'row1 column4'
    },
    {
        column1: 'row2 column1',
        column2: 'row2 column2',
        column3: 'row2 column3',
        column4: 'row2 column4'
    },
    {
        column1: 'row3 column1',
        column2: 'row3 column2',
        column3: 'row3 column3',
        column4: 'row3 column4'
    },
    {
        column1: 'row4 column1',
        column2: 'row4 column2',
        column3: 'row4 column3',
        column4: 'row4 column4'
    }

    ];

}]);

Open in new window


With the following html view:
<div ng-app="myApp">
    <div ng-controller="myAppController">
        <div class="row" style="background-color: gray; color: white;">
            <div class="row" style="background-color: gray; color: white;">
                <div class="col-xs-4 col-md-4">Header 1</div>
                <div class="col-xs-2 col-md-2">Header 2</div>
                <div class="col-xs-1 col-md-1">Header 3</div>
                <div class="col-xs-3 col-md-3">Header 4</div>
                <div class="col-xs-1 col-md-1"></div>
                <div class="col-xs-1 col-md-1"></div>
            </div>
        </div>
        <div ng-repeat="dataItem in displayData">
            <div class="row">
                <div class="col-xs-4 col-md-4">{{ dataItem.column1 }}</div>
                <div class="col-xs-2 col-md-2">{{ dataItem.column2 }}</div>
                <div class="col-xs-1 col-md-1">{{ dataItem.column3 }}</div>
                <div class="col-xs-3 col-md-3">{{ dataItem.column4 }}</div>
                <div class="col-xs-1 col-md-1">update</div>
                <div class="col-xs-1 col-md-1">delete</div>
            </div>
        </div>
    </div>
</div>

Open in new window


Which produces the following result:
RegularView.png
But when I make the browser smaller or change the device view, the column header and data seem to overlap:
Problem1.png
Is there an elegant way to resolve this issue?


Thanks.
0
In each bootstrap collapse expand panel I have a table with two columns and multiple rows created. Each row has a checkbox.

Now when I press Update Permission button, I intend to send two values to my angularjs controller namely perm.id and value.id for each row to process.

<div class="col-xs-12">

	<div class="row">
		<div class="col-md-12 margin-tb">
			<div class="pull-left">
				<h1>Listing Module</h1>
			</div>
			<div class="pull-right">
				<input type="button" ng-click="updPermission()" value="Update Permission">  
			</div>
		</div>
	</div>
		
	<div ng-repeat="value in module">
         <div class="panel-group">
              <div class="panel panel-default">
                  <div class="panel-heading">
                    <h4 class="panel-title">
						 <a class="accordion-toggle" data-toggle="collapse" data-target="#collapseModule{{value.id}}">
                            <i class="glyphicon glyphicon-collapse-down"></i>{{value.name}}
						 </a>
                    </h4>
                  </div>
                  <div id="collapseModule{{value.id}}" class="panel-collapse in">
					<div class="panel-body">
						
						<table class="moduleGrid table-striped table-bordered table-hover table-condensed">
						   <thead>
							  <tr>
								 <th>Permission</th>
								 <th>Status</th>
							  </tr>
						   </thead>
						   <tbody>
							  <!-- Now just ng-repeat the rows -->
							  <tr ng-repeat="perm in value.permission">
								 <td>
								

Open in new window

0
The following data is returned from my laravel coded controller:

data object
[{"id":1,"name":"View","createdDate":"2017-07-12 14:54:05","lastUpdate":"2017-11-07 13:52:27"},{"id":2,"name":"Read","createdDate":"2017-07-12 14:54:05","lastUpdate":"2017-11-07 13:52:27"},{"id":3,"name":"Write","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27"},{"id":4,"name":"Update","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27"}]

Open in new window


try object
[{"id":1,"name":"Dashboard","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","permission":[{"id":1,"name":"View","createdDate":"2017-07-12 14:54:05","lastUpdate":"2017-11-07 13:52:27","pivot":{"module_id_fk":1,"permission_id_fk":1}},{"id":3,"name":"Write","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","pivot":{"module_id_fk":1,"permission_id_fk":3}}]},{"id":2,"name":"Employee","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","permission":[{"id":3,"name":"Write","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","pivot":{"module_id_fk":2,"permission_id_fk":3}}]},{"id":3,"name":"Report","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","permission":[]},{"id":4,"name":"Access Right","createdDate":"2017-11-07 13:52:27","lastUpdate":"2017-11-07 13:52:27","permission":[]}]

Open in new window



In my angularjs controller I have the following line of code:

	$scope.compare = function(a,b){
		$scope.tmp = [];	
		for(var outer in a[0]){
			if(b.length>0){
				for(var inner in b){
					if(b[inner].name === a[0][outer].name){
						$scope.tmp.push({"name":a[0][outer].name,"status":true});
					}
				}
			}else{
				$scope.tmp.push({"name":a[0][outer].name,"status":false});
			}
		}
		return $scope.tmp;
	};

	$scope.init = function(){
		
		$scope.dfperm = [];
		$scope.modperm = [];
		$scope.counter = 0;
		
		$http({
			method: 'GET',
			url: "/api/v1/module/list"
		}).then(function successCallback(response){
			//console.log(response.data);
			//$scope.module = response.data;
			$array = response.data;				
						
			angular.forEach($array, function(outer, key) {			
				if(key==='data'){					
					$scope.dfperm.push(outer);
					//$scope.counter++;
				}
				if(key==='try'){
					angular.forEach(outer, function(outerItem, key){ 
						 var tmp = $scope.compare($scope.dfperm,outerItem.permission);
						 $scope.modperm.push({"name":outerItem.name,"permission":tmp});
					});
				}
			});
		}, function errorCallback(response) {
			console.log('intention error',response.data);
		});
		
	}

Open in new window


What I am attempting to do is to create a new permission object that has the status true or false.

As shown the data object contains a list of default permission.

The try object on the other hand shows that each module has permission. A module can have 0 or more than 1 permission.  

Now i'm trying to reconstruct the information so that each module has equal number of default permission but based on the try object conditioning (permission) is done to set the status either true or false.

However my code above doesn't do so. Rather a module with is set based on the try object conditioning (permission) and others are set with the default permission and status false.

Your help is kindly appreciated.
0
I intend to access the outer variable stated below

if(key==='data'){
	outer;  //outer variable
}

Open in new window


Inside the following like of code

angular.forEach(outer.permission, function(outer_perm, key) {	
        //I want to access outer
 });

Open in new window


here is the full line of code:

			angular.forEach($array, function(outer, key) {			
				if(key==='data'){
				    outer;
				}
				if(key==='try'){
					angular.forEach(outer, function(outer, key){
						 $module_name = outer.name; 
						 //console.log($module_name);
						 angular.forEach(outer.permission, function(outer_perm, key) {	
								//I want to access outer
						 });
					});
				}
			});

Open in new window


Your help is kindly appreciated.

Thank You.
0
I have a smart table with 2 columns. I want to have a mouseover with a popup for the second column to display more information. I found this link I'm following this example  http://plnkr.co/edit/3KiZdZsxwy6GDLoy6DhV?p=preview

I've spent at least 4 hours on this and still can't find a solution. I think it might be my injection of ui-bootstrap per this link
Possible explanation

You can see what I'm doing here:

1.  http://147.75.0.124:88   Log in with admin@admin.test and Password321$

2. Click on "Immigration" and click on the link under it

3. Look at Chrome's console and you see the error.

The error and what I've done

1. I get this error Unknown provider: $uibModalProvider <- $uibModal <- chapterCntrl

2. I made sure I have bootstrap.js and bootstrap-tpls.js
3. In module.js, I have this and I have a reference to it in the page  
angular.module('lawApp',   ['ui.bootstrap']);

Open in new window

4. I checked the bootstrap version.
5. In "chapterCntrl", I tried $uibModalInstance, $uibInstance and $uibModal.  I think $uibModal is correct but I still get the error
6. I changed "chapterCntrl" to below but I get an error with mainCntrl not being defined if  do below

(function () {
    'use strict';
    angular.module('lawApp','ui.bootstrap')

        .controller('chapterCntrl', chapterController);

Open in new window


What am I missing? I still think it's how I inject ui.bootstrap but don't know what else to try.
0
I have an angular UI application of two pages where one page takes user input details and insert the values on click of button into MySql DB through an API call and redirects to second page where details entered in first page must be displayed to user.

After inserting the values in first page, the values are stored in DB where it is recorded in php logs but in second page when I want to show the details of user entered, data row doesn't exist in DB.

The insert query is a single row insert and is not under any transaction. However even after implementing transactions same issue persist.

I have records of mysql logs also where there is only the insert log but no delete logs for the same inserted values.

I have kept a count of data before inserting and after inserting, the count got reduced by one when I have made a second API call to get details to second page to display the user details and throwing an exception of 400 bad request.
0
Is there a way to use AngularJS with Bootstrap 4? I would like to use AngularJS' cards and colors in Bootstrap 4. I don't know if this is possible since I'm not really looking into building an apps.
0
1. I followed examples in the link below and coded a map. It works. You can see a map here:

 http://leafletjs.com/examples/choropleth/

You see if you zoom out, you'll see Hawaii and Alaska.

2. I've been asked to make it look like this...Have Alaska and Hawaii next to the US
https://www.highcharts.com/maps/demo/us-counties

3. The Leaflet link in step 1 has the "us counties.js" file

4. I looked at Highchart's JS file (you can see the link in JSFiddle that comes with Highcharts, step 2 above).
    Looks like they have Alaska and Hawaii bundled in a separate section of the JS file and then they have the rest of the states.

Anyone has worked with Leaflet.Js and got Hawaii and Alaska moved next to the US?
0
I have created a new angular project via angular-cli.

I now what to install jQuery but installing it via npm.

How can I do this?
0
On Demand Webinar: Networking for the Cloud Era
LVL 10
On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

createNewASLForm is the main FORM
AslAccount - is the formArray
From Mark up -
<div *ngIf="createNewASLForm.get('AslAccount').get('acctNumber').touched " class="alert alert-danger">
                    Please enter Acct Number
                  </div>

Tried another

<input class="form-control g-remove-margin-bottom" value="" type="text" formControlName="aslFormName" placeholder="ASL Form Name" name ="acctNumber" required>
<div *ngIf="createNewASLForm.controls.AslAccount.controls.['acctNumber'].hasError('required') && createNewASLForm.controls.AslAccount.controls.['acctNumber'].touched" class="alert alert-danger">
Please enter Acct Num
</div>

Also need to add an entry for 11 numerical vals only....
           



Same this works for standalone controls in the main form
 <input class="form-control g-remove-margin-bottom" value="" type="text" formControlName="aslFormName" placeholder="ASL Form Name" name ="aslFormName" required>
              <div *ngIf="createNewASLForm.controls['aslFormName'].hasError('required') && createNewASLForm.controls['aslFormName'].touched" class="alert alert-danger">Please enter ASL form name</div>



Any help or pointers is appreciated.


Tried this one too...
Used this one too in the markup
<input class="form-control g-remove-margin-bottom" value="" type="text" formControlName="myAcct"   required>
<div *ngIf="myForm.get('SomeAcct').get('myAcct').touched " class="alert alert-danger">Please enter Acct Number</div>…
0
Is this the right way of doing...this is about Angular2 - http observables...
first use a .post and then do .get response of the same form data that was posted....

using a data API here - such as a converted http url to a privately named dataAPI

addFormData(formInput: FormInputs): Observable<FormInputs> {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  let sub = this.http.post(this.dataAPI, JSON.stringify(formInput), {headers: headers}).map(response => response.json()) ;

  sub.subscribe( (aData) => {console.log(aData); }, (err)=> console.log(err),  ()=>{ console.log("Done")} );

  return sub;
0
I am using Bootstrap 3 in my Angular 4 app to create a form. In the form, I need to render checkboxes on the basis of data returned from a web service call. So, I need to iterate over the data and render a checkbox for every value received.

The display for these checkboxes is bit messed up as in the screenshot below -
Current state
Is there a way to display these checkboxes in 3 columns. Something like this (looks much cleaner) Target state
My current code is as below


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" 

Open in new window

0
I had this question after viewing Anyway to format this array data differently?.

I've been at this for two hours now! it can't be that hard. I'll keep at it but I hope someone can help me...

 The solution in link above works and you can see the JSFiddle Husyein did here

https://jsfiddle.net/5t10qr3c/

My data has changed and I've added one more value to it. I just need to change the "str" and how it's contacted and add the new value.

My new data looks like this. Please note the "computedvalue". I also added "RowId" thinking this might help.
var data = [{
  RowId: 1,
  name: "county1",
  rank: 333,
  year: 2015,
ComputedValue: 2.8
}, {
  RowId: 2,
  name: "county2",
  rank: 2302,
  year: 2015,
ComputedValue: 3.7
}, {
  RowId: 3,
  name: "county1",
  rank: 144,
  year: 2014,
ComputedValue: 5.9
}, {
   RowId: 4,
  name: "county2",
  rank: 123,
  year: 2014,
ComputedValue: 8.4
}];

Open in new window



In the Fiddler above, how can I change this section to add an array of "computedvalue"?

if (that.name != this.name) {
      str += ']}{"name": "' + this.name + '", "data ": [' + this.rank;
    } else {
      str += ', ' + this.rank;
    }
  } else {
    str += '{"name": "' + this.name + '", "data": [' + this.rank;
  };

Open in new window


 I tried this but it breaks the "data" part of the string

I first changed the "_,chain" to this

var newdata = _.chain(data).sortBy("rank").sortBy("ComputedValue").sortBy("year").value();

Open in new window


Tried these 2

str += str += '{"name": "' + this.name + '", "data": [' + this.rank + '", "ComputedValue: ['+ this.ComputedValue

str += str += '{"name": "' + this.name + '", "data": [' + this.rank + ']' + ' ", "ComputedValue": [' + this.ComputedValue;

Open in new window


So, I want it to look like this. I have the original "data"...I wonder if I can push it into the final json below?

{"name": "county1", "data": [144, 333], "ComputedValue": [5.9,2.8]}{"name": "county2", "data ": [123, 2302], "ComputedValue": [8.4, 3.7]}
0
Hello there,

I have a custom validator that checks if an input field has a number entered into it. The code looks like so

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class NumberValidators {
    static isNumberCheck(): ValidatorFn {
    return  (c: AbstractControl): {[key: string]: boolean} | null => {
        if (c.value !== undefined && (isNaN(c.value))) {
            return { 'value': true };
        };
        return null;
    };
}
}

Open in new window


But the issue I have is when I enter a decimal value it is raising the validation flag which I dont want. I want the input field to have whole numbers and decimal numbers.Can somebody please help me get this correct.

thanks!!
0
I am attempting to apply form validation using bootstrap validator plug-in but I don't see results. Here is the code:

<div>
	<div class="modal-header">
		<h4 class="modal-title">Add Employee</h4>
	</div>
	<div class="modal-body">
		<table class="table table-responsive table-hover table-condensed">
			<div class="form-group margin-bottom">
				<label for="name" class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" data-error="Please enter name field." id="name" ng-model="employee.name" required />
                                       <div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="age" class="col-sm-2 control-label">Age</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" ng-model="employee.age">
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="gender" class="col-sm-2 control-label">Gender</label>
				<div class="col-sm-10">
					<select class="form-control" type="text" name="gender" id="gender" ng-model="employee.gender">                    
						<option>male</option>
						<option>female</option>
					</select>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="company" class="col-sm-2 control-label">Company</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="company" ng-model="employee.company">
				

Open in new window

0

AngularJS

400

Solutions

276

Contributors

AngularJS is an open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Top Experts In
AngularJS