AngularJS

369

Solutions

3

Articles & Videos

253

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

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
Transaction Monitoring Vs. Real User Monitoring
LVL 1
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

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 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
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
Enroll in June's Course of the Month
LVL 9
Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

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
Hi all I am having service written with one of the method as follows,
var GetData = function (token) {

    $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    var response = $http.get(baseurl + "api/controller/search/1/xxxx");
    return response;
};

Open in new window

When I am doing the same call in Postman or fiddler this is giving me results where as from application I am getting the following error
Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

I have added the extension Allow control Allow originto my chrome browser and testing .
0
I had this question after viewing Angular - why isn't this table working?.

I got help above and the solution works. But it doesn't work when I deploy it to our hosting server. It works locally.

This is the issue Solution    and this one Solution 2

1. I fixed one file but applying the fix to the second file doesn't work.

2. You can see it here. Login with admin@admin.com/ Password321$    http://147.75.0.124:88/

3. I found this link with different ways of injecting Article with solutions

I have this
var app = angular.module("lawApp", ['smart-table']);

Open in new window


4. I tried these and none worked. Still same error

 First solution
 
  (function () {
    'use strict';
    angular.module('lawApp')
        .factory('mainService', ['$http',mainService])
		.controller('mainCntrl', ['$scope', '$window', 'mainService', mainController]);

       function mainService($http) {
          ...
      }

    function mainController($scope, $window, mainService) {
        ...
     }
  

Open in new window


Second solution

(function () {
    'use strict';
    angular.module('lawApp')
        .factory('mainService', mainService)
		.controller('mainCntrl',  mainController);
   
    function mainService($http) {
          ...
      }

  function mainController($scope, $window, mainService) {
        ...
     }

 mainController.$inject = ['$scope', '$window', 'mainService'];

  angular.module('lawApp').controller('mainCntrl', mainController); //*** I tried it with and without this

Open in new window


5. I fixed one file by doing this but the same thing didn't work for the other file

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

angular.module('lawApp').service("loginService", ["$http", function ($http) {
 ...
}]);

  angular.module('lawApp').controller("loginCntrl", 
      ["$scope", "loginService", function($scope, loginService) {
         ...
   }]);

Open in new window


I'll continue with the other solutions in the link above but I hope someone can help.
0
Hello there,

I am using Angular2 datatable in a project to display tables with paginations.

Here is the link to the library https://github.com/mariuszfoltak/angular2-datatable.

Can somebody please clear some doubts I have with regards to the #mf="mfDataTable"? The developer has used in his demo and using the mf.data to refer to the data.But when I use that mf., my table does not get populated but when I use it without that .mf,my data is loaded in the tables.

So, do I need that #mf="mfDataTable" or what am I missing?

Below is my code.

<table class="table table-striped table-hover" [mfData]="products" #mf="mfDataTable" [mfRowsOnPage]="5">
                <thead>
                    <tr>
                        <th>
                            <mfDefaultSorter by="gtin">GTIN</mfDefaultSorter>
                        </th>
                        <th>
                            <mfDefaultSorter by="fdoname_en">Name Eng</mfDefaultSorter>
                        </th>
                        <th class="no-sort hidden-sm-down">
                            <mfDefaultSorter by="fdoname_fa">Name Per</mfDefaultSorter>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let product of products | SearchPipe : searchText">
                        <td><a [routerLink]="['/app/master/products',product.gtin]">{{product.gtin}}</a></td>
                        

Open in new window

0
I experience a problem to reset the form control and the error I received is TypeError: Cannot set property 'name' of undefined at m.$scope.clear.

Employee.php

<div class="panel panel-default">
		 <div class="panel-heading">Search Employee</div>
		 <div class="panel-body">
			<div class="row">
				<div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" type="text" name="name" id="name" ng-model="employeeSearch.name">                    
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="age">Age</label>
                        <input class="form-control" type="age" name="age" id="age" ng-model="employeeSearch.age">                    
                    </div>
				</div>
				<div class="col-md-6">
				    <div class="form-group">
                        <label class="control-label" for="gender">Gender</label>
                        <select class="form-control" type="text" name="gender" id="gender" ng-model="employeeSearch.gender">                    
							<option>male</option>
							<option>female</option>
						</select>
					</div>
                    <div class="form-group">
                        <label class="control-label" for="company">Company</label>
                        <input class="form-control" type="company" 

Open in new window

0
Hello guys,

I´m new in the world Angular and need make while in PHP but I´m receive error.

My php is:
$Conn = mysql_connect("127.0.0.1", "root", "");
$Db   = mysql_select_db("cdcol");

$sql = mysql_query("SELECT nome, Id FROM estudante ");
while ($row = mysql_fetch_assoc($sql)){

    $data[]=$row["nome"];
	
}

print json_encode($data);

Open in new window


An my html:

<table>
	<thead>
    	<tr>
        <th>Name</th>
        <th>Roll No</th>
        </tr>
    </thead>
    <tbody>
    	<tr ng-repeat="student in data track by $index"> 
                <td>{{student.nome}}</td>
                <td>{{student.id}}</td>
		</tr>
    </tbody>
</table>

Open in new window



I want get 2 fild from php:  nome and id  and show in html. I not can use Object I need learning with php Structured
0
I hope someone can help me with this. I've looked at so many examples and just don't know why the search in this smart table isn't working.

1. This is our test site http://147.75.0.124:88/
You can login with admin@admin.com / Password321$

(this is our staging site. It's slow. Might have to load the page a couple of times, if it doesn't show up)

2. At the bottom, you see the smart table. It binds and data shows up.

3. Enter something in the search box and the table isn't being filtered.

4. I see smart-table.js in "source" tab of Chrome console.

what am I missing? I've spent so much time on it and looked at different examples. I don't see what I'm missing in it.
0
Free Tool: Path Explorer
LVL 9
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

I am very new to angularjs. It is something I want to learn more. I have a php program that I send serialized form data to jquery. That works well. However, simple tasks from angularjs does not work in the rendered code.

Example:

I can execute this basic code on the parent page and it does the calculation properly:

10 + 20 = {{ 10 + 20 }}

The page outputs 10 + 30 = 30

However, on the rendered serialized jquery request it outputs as:
10 + 20 = {{ 10 + 20 }}

Need a little help getting my jquery pages to see the angularjs instruction.

Note: console is not giving any errors. I am using CDN:
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

I init angular in the body tag. I understand I can do this in a div tag as well:
<body ng-app>
0
How do I implement this in web api with Angular 2?
0
I've been working on a side project and I'm using Angular.

1. This code didn't work. It actually gives me an infinite loop.
(function () {
    "use strict";

    app.controller("mainCntrl",
       ["$scope", "$window", "mainService", function ($scope, $window,mainService) {

   ...


   $scope.menu = function() {

               console.log("in menu controller");

              mainService.getSideMenu().then (function(ret) {
                 console(ret);
              });
           }

  }]);

   

})();

Open in new window


2. I looked at some examples. This is one of them https://sirarsalih.com/2013/10/31/embedding-angularjs-in-asp-net-mvc/ so  I changed the code to this and it worked

  mainService
             .getSideMenu()
             .then(function (data) {
                 //$scope.students = data;

                 console.log(data);
             });

Open in new window


3. This is the service

app.factory('mainService', [
        '$http',
        function ($http) {
            return {
                getSideMenu: function () {
                    return $http({
                        method: 'GET',
                        url: '/main/test'
                    });
                }
               
            };
        }]);

Open in new window


Why did the first one didn't work? is there another way to do the "service" code ?
0
This is a first this is happen not sure why.  
mvc
  public ActionResult AData(testing s)
        {
   
        
            return new JsonController.JsonNetResult() { Data = "" };
        }

public class testing
{

    int A1ID { get; set;}
    int CIKID { get; set; }
    int SeriesID { get; set;  }
}

Open in new window



 let cid32 = JSON.stringify({ ID: 5, SID:9});
 this._Service.test(cid32).subscribe(response => {
        if (response.length != 0) {
           console.log("form data", response);
           this.formA = response;
           }
           else {
                console.log('no Response');
            }
        });

Open in new window


Service
 private _AData = 'http://localhost:5800/Home/AData';
test(name: any): Observable<any> {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    console.log(name);
    return this._http.post(this._AData , { name }, options)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

Open in new window

0
I got most of the Leaflet map I'm working on done today.

I found 2 example of the next thing I need to do: hover over the map and display some information about the state I'm hovering over. I have that information from db.

1. I looked at Leaflet's example here http://leafletjs.com/examples/choropleth/
     a. It's the first map in that link but you see the information is displayed in a corner. I want the popup to show on the state I'm hovering over.

    b. Scroll down and the code for it is here "Custom Info Control".  It uses a "div" and stylesheet.
         I'm thinking if I need to pass in the longitude and latitude? I don't want a marker.

2. I found this example as well  http://palewi.re/posts/2012/03/26/leaflet-recipe-hover-events-features-and-polygons/
    Please scroll down to "Hooking up hovers".  This is also similar to #1

What do I need to do? I couldn't find other examples to do this. Any ideas to get me going?
I think it needs a mouseover event with popup...looking at some posts online but don't know how to put all of this together.
0
I got a US map working using Mapbox.

Mapbox is map server and I got an API key and up to 50,000 views a month is free.

My coworker mentioned HighCharts https://www.highcharts.com/maps/demo/us-counties

Now, is Highcharts also a map server? anyone has worked with Highchart maps?
0

AngularJS

369

Solutions

3

Articles & Videos

253

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.