AngularJS

385

Solutions

261

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

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
On Demand Webinar: Networking for the Cloud Era
LVL 9
On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

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
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
Optimize your web performance
LVL 1
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

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
I am using keno ui grid for angularjs keno grid in our project and am  new to kendo . I am getting data from API similar to below JSON Data and need to bind this data to Kenod Grid basically there will be no header fields / columns .Just simply bind data to grid.

JSON Data (json data viewer

["cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6"
]

It would be great if anyone can provide sample example  in plunker/jsfiddle.

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

The solution in my question above works. You can see it in this JSFiddle that  Huseyin create here https://jsfiddle.net/5t10qr3c/

You see the string output is like this: {"name": "county1", "data": [144, 333]}{"name": "county2", "data ": [123, 2302]}

I actually need this in an array like this: For example array of 2
[Object, Object]
0: Object
    data: Array(2)
              0: 144
              1:333
     name: "county1"
1: Object
   data: Array(2)
             0: 123
             1: 2302
   name: "county2"

I tried these
I used "split" but that won't work

I thought just wrapping the "str" with [] would do it but no, it's still a  string.

I'm thinking as the string is being build, I need to push it into an array? but not sure.
0
1. I have an array and the data looks like below

 var seriesTest  =[];
 var ret = <I get the data from database with C# code>;

 for (var = i=0; i < ret.length; i++)
{
    seriesTest.push({ "name":ret[i].countyName, "rank": ret[i].rank, "year":ret[i].year  });
}

console.log(seriesTest);

Open in new window


2. The data looks like this
 0: Object
      name: "county1"
      rank: 333
      year: 2015

 1: Object
       name: "county2"
      rank: 2302
      year: 2015

 2: Object
       name: "county1"
      rank: 144
      year: 2014

 3: Object
       name: "county2"
      rank: 123
      year: 2014

Open in new window


3. You see the there are 2014 and 2015 years. There are two "county" names...county1 and county2. You see the "rank" as well
For the "data", I want the earliest year (2014) and then 2015
[
{"name": "county1", "data": [144,333]},
{"name": "county2", "data": [123,2302]},
];


Anyway to do this in Javascript?
0
New to Angular.  I am making my way through a book titled "Pro AngularJS" by Adam Freeman.

If you look at this screenshot while I was debugging the "Add" TO DO item functionality you can see that the new to do item is showing up in the items array, but the web page UI is not updating with the new item.

angular push
Why might it not be getting added?

I don't see any Javascript errors in the console... : (


Here is the TODO.html source:
<!DOCTYPE html>
<html data-ng-app="todoApp">
<head>
    <title>TO DO List</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script>
        var model = {
            user: "Adam"
        };

        var todoApp = angular.module("todoApp", []);

        todoApp.run(function ($http) {
            $http.get("todo.json").then(function (data) {
                model.items = data;});
        });

        todoApp.filter("checkedItems", function () {
            return function (items, showComplete) {
                var resultArr = [];
                angular.forEach(items, function (item) {

                    if (item.done == false || showComplete == true) {
                        resultArr.push(item);
                    }
                });
                return resultArr;
            }
        });

        todoApp.controller("ToDoCtrl", function ($scope) {
            $scope.todo = model;

            $scope.incompleteCount = function () {
                var 

Open in new window

0
A new era in Cloud training has arrived.
A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

Hello when I record date in database I show a message for my user. I would like that after 3 second this message hide. how do that?

$scope.msg="Dados inseridos com sucesso"; after 3 second hide this menssage

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>AngularJS com Mysql</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <style type="text/css">
<!--
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.style8 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
-->
    </style>
</head>
<body>
<div ng-app="myApp" ng-controller="cntrl">
    <form>
    Student Id:   <input type="text"    ng-model="id"   name="id" ng-disabled="obj.idisable">
    Student Name: <input type="text"    ng-model="name" name="name">
    <input type="button" value="{{btnName}}" ng-click="inserdata()">
    {{msg}}
    </form>

<table>
	<thead>
    	<tr>
        <th bgcolor="#EAEAEA"><span class="style5">Name</span></th>
        <th bgcolor="#EAEAEA"><span class="style5">Roll No</span></th>
      </tr>
    </thead>
    <tbody>
    	<select ng-model="cntrl" ng-options="data.Id as data.nome for data in data"></select>
    	<tr ng-repeat="student in data">
				<td align="center"><span class="style8">{{student.Id}}</span></td>
				<td align="center"><span class="style8">{{student.nome}}</span></td>
                <td align="center"><button ng-click="deleteSud(student.Id);" 

Open in new window

0
Hello Experts,

I would know  is it possible to implement Auto suggest  through angularjs2. The application has to search  the database and suggest some alternate name while typing in the text.


Thank you
Roy...
0
Hello there,

I am trying to implement angular2-datatable from https://github.com/mariuszfoltak/angular2-datatable/blob/master/README.md in to my application. But for some reason the rowsOnPage is not taking the number i assign to it. For e.g. when I say show 5 records on a page, it shows all the records. Dont know what I am missing. Can someone please help me resolve it.

<table class="table table-striped table-hover" [mfData]="products  | SearchPipe : searchText" #mf="mfDataTable" [mfRowsOnPage]="5">
                <thead>
                    <tr>
                        <th>
                            <mfDefaultSorter by="gt">GT</mfDefaultSorter>
                        </th>
                        <th>
                            <mfDefaultSorter by="name_e">Name E</mfDefaultSorter>
                        </th>
                        <th class="no-sort hidden-sm-down">
                            <mfDefaultSorter by="name_z">Name Z</mfDefaultSorter>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let product of products | SearchPipe : searchText">
                        <td><a [routerLink]="['/app/master/products',product.gtin]">{{product.gt}}</a></td>
                        <td>{{product.name_e}}</td>
                        <td>{{product.name_z}}</td>
                        <td>
                            <a class="btn btn-primary" 

Open in new window

0
Hello guys,

I stay started learning with Angular Js and have a doubt. How do I fill in the data of a select?

My code
<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>AngularJS com Mysql</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <style type="text/css">
<!--
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.style8 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
-->
    </style>
</head>
<body>
<div ng-app="myApp" ng-controller="cntrl">
    <form>
    Student Id:   <input type="text"    ng-model="id"   name="id" ng-disabled="obj.idisable">
    Student Name: <input type="text"    ng-model="name" name="name">
    <input type="button" value="{{btnName}}" ng-click="inserdata()">
    {{msg}}
    </form>

<table>
	<thead>
    	<tr>
        <th bgcolor="#EAEAEA"><span class="style5">Name</span></th>
        <th bgcolor="#EAEAEA"><span class="style5">Roll No</span></th>
      </tr>
    </thead>
    <tbody>
    	<select ng-model="cntrl" ng-options="student.Id as student.nome for student in students"></select>
    	<tr ng-repeat="student in data">
				<td align="center"><span class="style8">{{student.Id}}</span></td>
				<td align="center"><span class="style8">{{student.nome}}</span></td>
                <td align="center"><button ng-click="deleteSud(student.Id);" >Delete</button></td>
                <td align="center"><button 

Open in new window

0
https://jsfiddle.net/shanidkv/vbft1sc4/

Need this in angular2 with a model driven form. Any help or pointers are much appreciated.
0
I have node installed on my laptop.

I have a folder that I want to use for my testing of angular:

C:\programfiles\angularjs

node is installed here:

C:\programfiles\nodejs

From within the nodejs directory I want to be able to start an http server like this:

C:\programfiles\nodejs> node server.js

which would start the http server and just wait, listening on some port like 5000

then, in a web browser like Chrome, I want to navigate to localhost and load an HTML file:

localhost:5000/test.html

But the test.html file resides at this location:

C:\programfiles\angularjs\test.html

I've been doing lots of reading on "express" and "connect" middleware, but I just can't seem to make it work.


For example:

I ran the following:

npm install connect -g

and

npm install serve-static -g

and then ran "node server.js"

server.js:

var connect = require('connect');

var serveStatic = require('serve-static');


connect.createServer( serveStatic("../angularjs") ).listen( 5000);

Open in new window


gives this error:

TypeError: connect.createServer is not a function
0

AngularJS

385

Solutions

261

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.