[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x

AngularJS

454

Solutions

300

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

MENU DROP DOWN LIST WITH CHECKBOX in ANGULAR 4 ...... the Menu data should be offline JSON
0
Free Tool: Subnet Calculator
LVL 11
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

I'm attempting to port a small AngularJS project to Angular. The first steps I've taken is to use Plunker to build the infrastructure to learn how this thing will go together.

This is the AngularJS version on JSFiddle: https://jsfiddle.net/Mrbaseball34/wtx6j681/

This is the beginnings of the Angular version on Plunker: http://plnkr.co/edit/oNoYlv59fCwUut42Q4vc?p=info


I can't seem to get my head around how to make the alerts show and also to change the class in the `<i>` tag base on which `alert_type` it is.

These are the errors I'm getting:

    Error: (SystemJS) Error: Template parse errors:
    	'alertdetail' is not a known element:
    	1. If 'alertdetail' is an Angular component, then verify that it is part of this module.
    	2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    	    <div>
    	      [ERROR ->]<alertdetail></alertdetail>
    	    </div>
    	  "): ng:///AppModule/App.html@2:6

Open in new window

I tried making the `alertdetail` just a "directive" but it too didn't work:
    export const alertDetail = {
        bindings: {
            alerts: this.alerts
        },
        template: `
            <div class="row" *ngFor="#alert of alerts">
                <div style="padding-left: 25px;" class="alert_links col-sm-12">
                    <i class="fa fa-warning fa-red"></i>&nbsp;
                    <a href="#"  
                       title="There are {{ alert.count }} {{alert.alert_type}} 

Open in new window

0
For some reason the jquery side works fine. But for the life of me I cannot get this working in angularjs file.
Everything says it should work. The client connection is good and once it gets down to the client nothing is return but on the jquery side it works. I will show both code.
jquery works great.
 $(function () {
        $.connection.hub.start()
            .done(function () {
                console.log('SignalR connected, connection id = ' + $.connection.hub.id);
                console.log('Username = ' + '001');
                $.connection.messageHub.server.connectToMessageHub('001');
            })
            .fail(function (data) {
                console.log('SignalR failed to connect: ' + data);
            });
 
        $.connection.messageHub.client.reloadData = function (jsonObject) {
          console.log("sendToast called");
          console.log('get data=', jsonObject);
          
    
        };
       
    });
        $.connection.hub.start().done(function () { // initiate connection
      });
    });

Open in new window

angularjs side
 $.connection.hub.logging = true;
        $.connection.hub.start().done(function () {
            console.log('Your Hub started Sucessfully.');
        });
        setTimeout(function () { alert("Hello"); }, 10000);
        $.connection.messageHub.client.reloadData = function (message) {
            alert('Now it works!', message);
        };

        $.connection.hub.start()
            .done(function () {
                console.log('Connection established!');
            });

Open in new window

0
Hi, I am using angular. I have an issue with window open with below parameters (to open a new tab for the url)

var newWindow = window.open(url, "_blank");
newWindow.onload = function () { newWindow.document.title= "New Title"; }

When new tab is opened it does not have the "New Title" which I am expected. Please help
0
I  have developed dashboard link to list job status where it will have list of jobs and statuses in a table with search and pagination.
When I search few words its working fine but when I paste complete job name /enter full job name im not getting result.

Can any one help. UI developed using Angular js
1
I get undefined message in this code.

controller code:

$scope.searchOutputLst=[];
$scope.searchOutputLst=MyService.retrieveData($scope.caasSearch); // this http call returns data : an array of objects
console.log($scope.searchOutputLst); // prints undefined

Open in new window


 what is the issue ?

I am using angular js 1.3
0
Routing using lazy load modules. routeing the current view I left to enter a new view the old view loads at the bottom. This just starter happening with angular5. Not sure why. very hard to debug.
0
I have a  list of checkboxes and have a button called "advanced",when a checkbox is selected and click on the advanced it should take to different page in which it has a tree from api which takes selected checkbox value as input to URL
0
When I go directly to the URL Eg. http://test.local/#!/ it will call the controller when I navigate through the pages.

When I go directly to http://test.local/#!/page1 and then try navigating to page2 etc or even an invalid page it will not call the controller and I don;t get the redirect. It will however if the page is valid load it.

var app = angular.module("eventApplication", ["ngRoute"]);

app.config(function($routeProvider, $locationProvider) { 
	$routeProvider
    .when("/", {
        templateUrl : "pages/main.php",
		controller: "routeController"
    })
    .when("/page1", {
        templateUrl : "pages/page1.php",
		controller: "routeController"
    })
.when("/page2", {
        templateUrl : "pages/page2.php",
		controller: "routeController"
    })
	.when("/error", {
        templateUrl : "assets/static/error.html"
    })
	.otherwise({
		redirectTo: "/error"
	});
});

app.controller("routeController", function ($rootScope, $http, $location) {
	$rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
		$location.path("/error")
		console.log("App Error: Unable to locate path 404.");
	});
});

Open in new window

0
Hi Experts,

I am working on Kendo Grid and  have a requirement similar to screenshot attached. I want to get rid  of white space  around column menu.

http://dojo.telerik.com/uLIqU

In the above link click on 3 dot vertical menu and hover to columns , it will show list of menu items and want to remove white space.

Thanks in Advance
0
[Webinar] Cloud and Mobile-First Strategy
LVL 11
[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Hi, I am using angular application. In the Db values are stored in pacific time and saved in string column; how do I display time based on browser timezone? I tried only at html side where it displays same value; not sure if value need to be retrieved from DB at server end and convert to pacific time and at browser UTC time. Please advise with example.
0
Hi

In my Angular 2 application, i need to open a popup on button click where i can add  TO address and from address and attach file to the email and send emails..

Can you please provide me a sample code for sending emails in Angular application..
0
I'm learning how to unit test an Angular 2 application and I would appreciate some guidance here. In the function below, I have some code that connects to a SQLite database and runs a transaction. I am trying to understand how to unit test the parts in red (shown in screen shot). Can you please help me to understand how I would write tests that generate coverage?

I am using Jasmine 2.5.3, karma 1.5.0 and angular 4.1.3.

Thank you for advice and guidance.

runSqlTransaction(db: SQLiteObject) {
    this.db = db;
    return new Promise((resolve, reject) => {
      this.db.open().then((res) => {
        try {
          db.transaction(tx => {
            this.tx = tx;
            tx.executeSql(this.sqlQuery, this.params,
              (tx: any, res: any) => resolve({ tx: tx, res: res }),
              (tx: any, err: any) => reject({ tx: tx, err: err }));
          });
        } catch(e) {
          reject(e);
        }

      }).catch(e => {
        console.log('Is the database open failed', e);
      });
    });
  }

Open in new window


Coverage
0
Hi ,

I am creating a simple component in Angular 4

-my-account  // angular project folder
--app
----account  // angular component folder
-----css
-----js
-----images
-----account.component.html

//css , js , images are folders I created and put files.


Now I want to use css files from the above css folder in account.component.html.  How do I access ?


Here is my non working code

account.component.html
----------
<head>
 <Link href="css/datatables.min.css" rel="stylesheet" type="text/css"/>
 ....
 </head>
 
 
 I'm getting error
 zone.js:2744 GET http://localhost:4200/css/datatables.min.css 404 (Not Found)

please note this file is already present in css folder.
 
Do you have any suggestion how to access css files in component html   ?  what is the proper way to fix ths issue ?
Need help
1
When I hit ng serve on cmd it's not working although its working 1st & 2nd time but its not working now. All things are running perfectly. eg ng --version .. the problem is only with ng serve ..it only runs for the 1st & 2nd time..

Here is the error that cmd geneartes.

 $ ng serve
    ENOENT: no such file or directory, stat 'E:\Work\Angular\Basic website\Angular 4\my-first-app\src\tsconfig.json'
    Error: ENOENT: no such file or directory, stat 'E:\Work\Angular\Basic website\Angular 4\my-first-app\src\tsconfig.json'
        at Error (native)
        at Object.fs.statSync (fs.js:1000:11)
        at AotPlugin._setupOptions (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@ngtools\webpack\src\plugin.js:62:16)
        at new AotPlugin (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@ngtools\webpack\src\plugin.js:27:14)
        at _createAotPlugin (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\models\webpack-configs\typescript.js:55:12)
        at Object.exports.getNonAotConfig (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\models\webpack-configs\typescript.js:71:19)
        at NgCliWebpackConfig.buildConfig (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\models\webpack-config.js:29:37)
        at Class.run (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\tasks\serve.js:43:98)
        at 

Open in new window

0
This is my main.html codeThis is my main.html codeThis is my insert.php codeAnd this is the error which always arises whenver i use localhostHi There I have been getting this issue lately. I don't know where this error come from. Whenever I use my localhost(Obviously i need it for my php files to run) this error arises in console

Error in response to storage.get: SyntaxError: Unexpected token <
    at Object.callback (chrome-extension://nkeimhogjdpnpccoofpliimaahmaaome/js/content.js:1:50)
    at chrome-extension://nkeimhogjdpnpccoofpliimaahmaaome/js/content.js:1:22

This error occurs for all files which i open using localhost.But when I used without localhost ie simply open the html file it works just fine.
Currently I'm learning Angular.js
Here I want to insert data in database using ANGULAR & PHP
0
Hi,
I have used AngularJS sound manager(<sound-manager></sound-manager>).
While playing If i click on the progress bar then it is playing from the beginning, how do i start from the selected position.
This is my HTML code:
<sound-manager></sound-manager> <div class="mv-vmPlayer"> <ul> <li><button id="playPreviousTrack" ng-attr-title="{{localize.ux.messageViewer.PlayPrev_btn_label}}" ng-click="widget.onPlayPrevVMClick()" ng-disabled="widget.playPrevDisable"><i class='icon-arrow-left'></i></button></li> <li><button id="playNextTrack" ng-attr-title="{{localize.ux.messageViewer.PlayNext_btn_label}}" ng-click="widget.onPlayNextVMClick()" ng-disabled="widget.playNextDisable"><i class='icon-arrow-right'></i></button></li> <li><button ng-click="widget.pauseTrack()" ng-attr-title="{{localize.ux.messageViewer.Pause_btn_label}}" ng-disabled="!widget.isPlaying"><i class='icon-pause'></i></button></li> <li><button id="playTrack" ng-attr-title="{{localize.ux.messageViewer.Play_btn_label}}" ng-click="widget.onPlayVMClick()" ng-disabled="widget.playDisable"><i class='icon-play'></i></button></li> <span id="spnEmbedTag"></span> <!--<li><button id="widget.playVM" ng-click="widget.onPlayVMClick()" ng-disabled="widget.playDisable"><i class='icon-play'></i></button>--> <li><label>&nbsp;</label></li> <li><label>&nbsp;</label></li> <li><label>&nbsp;</label></li> <li><label>{{ widget.currentPosition }}</label></li> <li> <div class="seekBase" seek-track> <div id= "seekLoad" class="seekLoad 

Open in new window

0
I am very new to the technologies and learning angular js by developing a quiz app using angular js(MEAN stack). I want to mix the questions of Multiple choice questions and fill in the blank questions. I have created multiple choice questions but I am not able to create fill in the blank questions. could someone please give some suggestions, how to create fill in the blank questions.

for example: how ---you?, what --- you doing?. these kinds of questions.

Thanks in advance
0
I am very new to the technologies and learning angular js by developing a quiz app using angular js(MEAN stack). I want to mix the questions of Multiple choice questions and fill in the blank questions. I have created multiple choice questions but I am not able to create fill in the blank questions. could someone please give some suggestions, how to create fill in the blank questions.

for example: how ---you?, what --- you doing?. these kinds of questions.

Thanks in advance.
0
Prep for the ITIL® Foundation Certification Exam
LVL 11
Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Hello to All,
Scanario:- I have to share product with user and i have two list- 1st connected user list for share product with user and 2nd is the shared user list(sahred product list) if i have click on  the  checkAll checkbox here all checkbox will be check but at time i have to remove 1 user at  a time and click on the shared user list.now again i click on the checkAll checkbox here only 1 user found and i will get 1 update user but here i will be found all user again because i have iterate all the list again,
angular.forEach($scope.selectedSharedBuyerObjectList) - here i will remove the match keyID and updated the 1 user how  to resolve this issue?


/**
 * @Summary: checkAllConnectedUser function, to create album
 * @param: index, productObj
 * @return: callback(response)
 * @Description:
 */
$scope.shardBuyerKeyIdArray = [];
$scope.countBuyer = 0;
$scope.checkAllSharedBuyer = function(isChecked) {
  if (isChecked) {
    if ($scope.selectAll) {
      $scope.selectAll = false;
    } else {
      $scope.selectAll = true;
    }
    angular.forEach($scope.selectedSharedBuyerObjectList, function(selectedBuyer) {
      selectedBuyer.select = $scope.selectAll;
      //IF ID WILL BE EXIST IN THE ARRAY NOT PSUH THE KEYID
      if ($scope.shardBuyerKeyIdArray.indexOf(selectedBuyer.userTypeDto.keyId) == -1) {
        $scope.shardBuyerKeyIdArray.push(selectedBuyer.userTypeDto.keyId);
        $scope.countBuyer++;
      }
    });
  } else {
    …
0
I have included pdf through embed tag which will display in a modal after clciking the button using  angualrjs, now i want to show a loading spinner till that pdf loads, how can i get to know that pdf is loaded or not and how can i add spinner? Can anyone help me on this??
0
I have the following AngularJs code:
var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$http', function ($scope, $http) {
    
    
    $http.post('/Home/GetDesiredResult', { numberOfRecords: 20 })
        .then(function (response) {
            // success
            console.log(response);
            $scope.desiredResult = response.data;    

             // Over here, $scope.desiredResult contains data       
        }, 
            // Error
            function (response) {
                console.log(response);
        });

    // Over here, $scope.desiredResult is undefined


}]);

Open in new window


What is the cleanest way to get the data I get back from my $http.post saved in $scope.desiredResult so it is accessible in my app?
0
Hello I am using Angular UI Grid to display the data in neat and clean manner. In the UI grid, there is one column as "Duration". I want to sort this column in descending order but unfortunately, i am unable to do that. I tried but it is sorting in text format.
In the controller part I have written as follows:
$scope.sortTrendingEvents = function () {
$scope.slaGridOptions.data = $filter('orderBy')($scope.slaGridOptions.data, "duration", true)
console.log('this button is clicked when trending event is pressed');
};
In the HTML part I have written as:
<button id="toggleFiltering" class="nxn-btn-primary nxn-mar-right-10" ng-click="sortTrendingEvents()">Trending Events</button>

Trending Events
In short what I have done is on the click of a button the Duration column must be sorted in DESC order but with the help of this code,

I am unable to sort this column in number pattern.
Please do guide me. Thank you so much.
0
I am following the tutorial from here: "http://itsolutionstuff.com/post/codeigniter-3-and-angularjs-crud-with-search-and-pagination-exampleexample.html"

I am getting these errors: errors
Where am i going wrong ? i have tried exhaustively to search for answer or hint but i am lost, i am obviously pretty new to codeigniter.
Here is link to github files that i downloaded for tutorial. I appreciate any help or suggestion. Thank You all.
0
I am exporting a table using pdfmake
The table exports, but there is one item that is 'undefined'.  

I have a main page with multiple tabs and once you hit the 'Printer Friendly' btn, a pdf report opens in a new tab for the specific tab you selected.  The 'printer friendly' btn is what exports the page.  

This code broadcasts  the print function to produce the pdf report depending on what tab you are on.
$scope.printDiv = function(divName) {		
		$rootScope.$broadcast('print');		
	}
	

Open in new window


and the button
<button ng-click="printDiv('rollup-tab')">Printer Friendly</button>

Open in new window



Here is the rest of the code.

Table creation and exports the pdf pdf
$scope.$on('print', function(event, filter) {
			var docDefinition = {

					content: [	
					          {
						  table: {

					              body: [                   			                
					                [ 
					                  '',
					                  'Actual Pieces Issued',
					                  {text: $filter('mcGoalNumberFilter')($scope.actualPiecesMCGoal) + ' /wk'},			                  
					                  {text: $scope.actualPiecesMon, style: 'tableData'},
					                  {text: $scope.actualPiecesTues, style: 'tableData'},
					                  {text: $scope.actualPiecesWed, style: 'tableData'},
					                  {text: $scope.actualPiecesThurs, style: 'tableData'},
					                  {text: $scope.actualPiecesFri, style: 

Open in new window

0

AngularJS

454

Solutions

300

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
<
Monthly
>