Sunday, October 22, 2017

Angularjs $http spring rest controller – 404 error

I am getting 404 error on making a $http call from angularjs to spring controller, here is the code :

Factory :

factory.checkCodeAvail = function(url){
        return $http({
            url: url,
            responseType:"json",
            method: "GET",
            headers: {
                "Content-Type": "application/json"
            }
        });
}

This factory method is called by controller :

commonFactory.checkCodeAvail('findDepartment')
                    .then(function (success){
                        console.log(success);
                   },function (error){
                       console.log(error);           
});

This is the error i m getting in browser console :

GET http://localhost:8080/TexERP/findDepartment 404 ()

Spring controller :

@RestController
public class AdminController {

    private static final Logger logger = LoggerFactory.getLogger(AdminController.class);

    @RequestMapping(value="/findDepartment", method=RequestMethod.GET)
    public ResponseEntity findDepartment(HttpServletRequest req, HttpServletResponse res){
        ResponseEntity response = null;


        return response;
    }

}

servlet file.xml:

 <context:annotation-config />
 <!-- <cache:annotation-driven /> -->

 <context:component-scan base-package="com.erp" />
 <mvc:annotation-driven/>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>TexERP</display-name>

  <servlet>
    <servlet-name>erp</servlet-name>
    <servlet-class>
          org.springframework.web.servlet.DispatcherServlet
    </servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <listener>
       <listener-class>
          org.springframework.web.context.ContextLoaderListener
       </listener-class>
    </listener>

  <context-param>
       <param-name>contextConfigLocation</param-name>
       <param-value>/WEB-INF/erp-servlet.xml</param-value>
    </context-param>



<servlet-mapping>
    <servlet-name>erp</servlet-name>
    <url-pattern>/TexERP/*</url-pattern>
  </servlet-mapping>
</web-app>

Ajax call is not reaching spring controller.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/angularjs-http-spring-rest-controller-404-error/
via @lzomedia #developer #freelance #web #lzomedia.com

Check if Current Time is Between Opening & Close Times with Angularjs

I’m trying to indicate if a business is open given the current time of day, an open time, and a close time. Here’s my time format.

$scope.open = "1970-01-01T13:00:00.000Z"; // We can ignore the dates
$scope.close = "1970-01-02T22:00:00.000Z"

Is there a simple & surefire way to determine this in Angularjs? Something like

<div ng-if="currentTime >= open && currentTime < close"></div>

I have found several moment libraries that could possibly handle this, but I feel like importing a whole library is overkill for a basic time comparison, and most of the javascript solutions I’ve come across don’t handle this time format.

Any input is appreciated!

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/check-if-current-time-is-between-opening-close-times-with-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com

is it possible not to execute the promise (.then ()) in the controller when there is an error in a web request?

I’m currently using a factory called http that when I invoke it, I make a web request. this receives as a parameter the url of the web request.

app.factory('http', function ($http) {
 var oHttp = {}
 oHttp.getData= function (url) {

    var config={
        method: 'GET',
        url: url
    }
    return $http(config).then(function(data) {
        oHttp.data=data.data;
    },function(response) {
       alert("problem, can you trying later please?")
    });
  }
 return oHttp;

});


function HelloCtrl($scope, http) {
 http.getData('https://www.reddit.com/.json1').then(function(){
  if(http.data!=undefined){
   console.log(http.data)
  }
 })
}

I would like the promise not to be executed on the controller if the result of the web request is not satisfied or there is a problem. is there any better solution? I want to avoid doing this every time I make a web request, or do not know if it is the best way (see the if):

//I am putting "1" to the end of the url to generate an error.
  http.getData('https://www.reddit.com/.json1').then(function(){
   //validate that the result of the request != undefined
    if(http.data!=undefined){
     alert(http.data.kind)
    }
  })

In my real project I make n web requests using my factory http, I do not want to do this validation always. I do not know if I always have to do it or there is another solution.

this is my code:

https://plnkr.co/edit/8ZqsgcUIzLAaI9Vd2awR?p=preview

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/is-it-possible-not-to-execute-the-promise-then-in-the-controller-when-there-is-an-error-in-a-web-request/
via @lzomedia #developer #freelance #web #lzomedia.com

Array attribute not parsing to angularjs Directive

My directive is

angular.module('app').directive('authorDirective',authorDirective);
function authorDirective()
{
    return {
        restrict: 'E',
        scope: {
            Authors: '=',
            details: '&',
            name : '='
        },
        replace : true,
        template: 
        '<table class="table"><thead>'+
        '<tr><th>Name</th><th>Nationality</th><th>Dates</th></tr></thead>'+
        '<tbody ng-repeat="model in Authors">'+
        '<tr><td></td><td></td><td></td></tr>'+
        '</tbody></table>'
    };

}

Controller is

    angular.module('app').controller('LabController',LabController);
function LabController ()
{
    var vm = this;
    vm.Authors = [
        {Name : "Mark Twain",Nationality : "American", Dates : "1885-1910"},
        {Name : "A.A Miline",Nationality : "English", Dates : "1882-1956"},
        {Name : "Charles Dickens",Nationality : "English", Dates : "1812-1870"},
        {Name : "Jane Austen",Nationality : "English", Dates : "1775-1817"}
    ];
}

and the HTML

<!DOCTYPE html>
<html ng-app="app">

<head>
    <title>Directives</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
</head>

<body ng-controller="LabController as vm">
    <div class="container">
        <h1>Directives</h1>
        <author-directive Authors="vm.Authors"></author-directive>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="./app/app.js"></script>
    <script src="./app/LabController.js"></script>
    <script src="./app/authorDirective.js"></script>
</body>

</html>

I tried to pass object via scope attribute to directive. It was working. But when I try to pass array I can’t. Didn’t find any error in browser console also. What Wrong did I make here? Thanks in advance for helping.

Plunker is here

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/array-attribute-not-parsing-to-angularjs-directive/
via @lzomedia #developer #freelance #web #lzomedia.com

are these ui-sref states ie11 friendly

When trying to navigate with IE11, the links do not work with a state such as url: '/main-category/:id' but the “parent” state url: '/:main-category/' works fine. These are not true nested or parent-child since they don’t actually share any common views/html template, except for navigation.

I found this meta tag suggestion and this IE events suggestion, but neither seem to be providing a solution for why my navigation bar AND links from another state do not function.

Here is a live site without minify, to test compare IE11 & all other browsers.

So, are these routes correctly setup?

router.js

angular.module('app_litsco')
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('home', { //this state works
                url: '/',
                templateUrl: 'html/home.html',
                controller: 'controller_home',
            })
            .state('product_streamline', {  //this state DOES NOT work
                url: '/streamline_metal_panels/:id',
                templateUrl: 'html/template_product.html',
                controller: 'controller_prods',
            })
            .state('streamline_panels', { //this state works
                url: '/:cat',
                templateUrl: 'html/template_productlist.html',
                controller: 'controller_productlist',
            })

        $locationProvider.html5Mode(true);
    }]);

index.html

example NavBar section

<li class="link">
    <!-- Main Category link -->
    <a data-activates="streamline-panel-dropdown" class="blue-text text-darken-4 product-link" ui-sref="streamline_panels({ cat: 'streamline_metal_panels' })">STREAMLINE METAL PANELS</a>
    <div id="streamline-panel-dropdown" class="dropdown-content dropdown-full full">
        <div class="container dropdown-container flex-row-around-center">
            <div class="col sm12 m3 text-center dropdown-item">
    <!-- Sub-Category links -->
                <a ui-sref="product_streamline({ id: 'classic_cr' })" class="product-link">Classic CR</a>
            </div>
            <div class="col sm12 m3 text-center dropdown-item">
                <a ui-sref="product_streamline({ id: 'omniwall_md' })" class="product-link">Omniwall MD</a>
            </div>
            <div class="col sm12 m3 text-center dropdown-item">
                <a ui-sref="product_streamline({ id: 'omniwall_cl' })" class="product-link">Omniwall CL</a>
            </div>
        </div>
    </div>
</li>

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/are-these-ui-sref-states-ie11-friendly/
via @lzomedia #developer #freelance #web #lzomedia.com

Angular 4. What is :host in angular CSS?

I have trouble understand the concept of :host selector in Angular CSS. What exactly does it do?

I looked at here https://angular.io/guide/component-styles. It starts talking “host element” and “parent component” which are equally confusing since I can’t find a concrete definition online. What exactly is host element? What makes a component a parent component?

Then there is an example of :host on this blog:
https://www.concretepage.com/angular-2/angular-2-4-component-styles-host-host-context-deep-selector-example
But it looks like :host just creates a bunch of rectangles on top of each other??

It said “The style written in :host selector in CompanyComponent will be applied in host element in PersonComponent and so on”

But what style is applied? It just create a rectangle with :host and paste it on other template

Please I need help.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/angular-4-what-is-host-in-angular-css/
via @lzomedia #developer #freelance #web #lzomedia.com

Web application architecture with zend framework 3 and AngularJS

I am building a web application with Zend Framework(backend) 3 and AngularJS 1.6.x.
I have created a project architecture for the application. I have saved the angular app inside the public directory of the zend framework. Is this a valid and secure architecture? Should i move the files like node_modules outside the public directory?

enter image description here

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/web-application-architecture-with-zend-framework-3-and-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com

Force angularjs attribute directive to not parse its value

I am making an attribute directive that will work similarly to ng-if.

window-match-media="(min-width: 400px)"

which will make the element render if the media query matches and disappear otherwise. I am modeling my directive on the code for ngIf

It works great with the exception that I have to currently enclose the media query in an extra pair of quotes. This is because without it, it seems to try to parse the attribute value. This makes sense for ngIf but in my case I want to simply treat the value as a string.

I see nothing in the ngIf codebase that would allow me to indicate that the value should not be parsed, and adding

  scope: {
    windowMatchMedia: '@',
  },

does not help (I’m not sure attribute directives can isolate scope anyways?).

I access the value via the $attributes parameter to the directive’s link function which always does seem to provide it as a string, but if I do not specifically make it one with quotes ie

window-match-media="'(min-width: 400px)'"

I get an error before my directive ever gets a chance to run due to the parsing issue. How do I tell the attribute directive to not parse its value? I don’t see anything about this in the $compile docs.

Edit: Here is a Plunkr demonstrating the issue. I should probably open source this after I get it working the way I want and document it

Note how in this example, there is an error in the console

If I surround the attribute in quotes it works because the parser is detecting it as a string. But I don’t want the parser involved at all. I want to write a regular ol’ attribute value.

I would like the attribute syntax in the first example to work.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/force-angularjs-attribute-directive-to-not-parse-its-value/
via @lzomedia #developer #freelance #web #lzomedia.com

AngularJS callback error and is not a function

I have an error in line callback(response.data) telling that callback is not a function. Well, I am new to this and I am trying to figure out how to fix this issue but I am having a tough time. Any idea is appreciated. Thanks

 app.service('NotificationPollService', function ($q, $http, $timeout) {

      var notification = {};
      notification.poller = function (callback, error) {
          return $http.get('api/sample.php').then(function (response) {
              if (typeof response.data === 'object') {
                  callback(response.data);                 
              } else {
                  error(response.data);
              }
              $timeout(notification.poller, 2000);
          });
      }

      notification.poller();

      return notification;
});

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/angularjs-callback-error-and-is-not-a-function/
via @lzomedia #developer #freelance #web #lzomedia.com

How to place the md-sidenav handler as child of sidenav himself

I am interested into know id if possible (based on this example) put the Toggle right button as child of the right md-sidenav, this should keep fixed in respect to the parent bu keeping visible when sidenav is closed.

This is an example: https://devitems.com/html/subas-preview/subas/index-2.html

Regards and thanks in advance.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/22/how-to-place-the-md-sidenav-handler-as-child-of-sidenav-himself/
via @lzomedia #developer #freelance #web #lzomedia.com

Saturday, October 21, 2017

Accessing port 4200

Kindly help me…
When I try to host,it shows error message like this

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/accessing-port-4200/
via @lzomedia #developer #freelance #web #lzomedia.com

why providerRoute is not working

    var app = angular.module('MyApp', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
            templateUrl: "Home/EmployeeList",
            controller: "listController",
        })
        .when("/Home1", {
            templateUrl: "Home/EmployeeTable",
            controller: "tableController",
        })
        .otherwise({
            redirectTo: "/Home/Index"
        })
        .controller("listController", function ($scope) {
            $scope.message = "In list controller";
        })
});

why on running code TypeError:routeProvider.when(…).when(…).otherwise(…).controller error shows in cosole.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/why-providerroute-is-not-working/
via @lzomedia #developer #freelance #web #lzomedia.com

HTML cache manifest and dynamically loaded images

I have a web app with offline functionality.
I managed to get the manifest working properly with all the required assets; css, js and images.

However I use angular to get from the server a list of user generated images, in a similar manner:

$scope.images = angular.fromJson(localStorage.getItem('images')) || []

$http
.get('/my-rest-endpoint')
.then(function(res){
    $scope.images = res.data
    localStorage.setItem('images', angular.toJson(res.data))
}).catch()

I use the localStorage to keep the list even if the user is offline,
however I would like to have these pictures included in my offline cache…
Any idea how to achieve this?

BONUS:

In the future there may also be video files. What to do in that case?

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/html-cache-manifest-and-dynamically-loaded-images/
via @lzomedia #developer #freelance #web #lzomedia.com

ng-show doesn’t work correct with value boolean

I have one issue like that:

<input type="text" ng-model="keyword" ng-change="filterItemByName()">
<ul class="suggestion-list dropdown-menu" ng-show="isSearching">
  <li ng-repeat="item in list">
    <span ng-click="handleAction(item);"></span>
  </li>
</ul>

And here is the js:

$scope.isSearching = false;

$scope.filterItemByName = function(){
    //handle for searh item
    $scope.isSearching = true;
};

$scope.handleAction = function(item) {
    console.log(item);

    $scope.isSearching = false;
};

The problem in here is, when input the keywork, my app will call an request to get the list (suggestions), but when i click on the item in the list, nothing happend, it doesn’t log anything, it didn’t call handleAction as is.

I just found the problem related about the $scope.isSearching, when we show like above, the ng-click doesn’t trigger. But if i do :

<ul class="suggestion-list dropdown-menu" ng-show="isSearching == true">

It works fine. Anyone can explain for me that? Thanks.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/ng-show-doesnt-work-correct-with-value-boolean/
via @lzomedia #developer #freelance #web #lzomedia.com

ng-model not work within ng-if and ng-repeat, AngularJs?

I have the following template:

<tr ng-repeat="dailyInformation in TradodModel.Model.EmployeeDayRelatedData.DailyInformation track by $index" ng-click="DailyInformationRowOnClick(dailyInformation, $event)" data-selected="" data-rowindex="">
        <td ng-if="!IsHourlyContract() && DailyOverShowType() != @((short) DailyOverShowTypeEnumeration.NotShow) && !DailyOverType()" data-changed="" title="" class="">
            @if (ViewBag.HasWritePermission)
            {
              @Html.BootstrapTimeTextBox("OverTimeTextBox", "", false, false, 2, false,
                new Dictionary<string, object>
                {
                  {"data-disableindexing", "true"},
                  {"ng-if", "DailyOverShowType() == " + (short)DailyOverShowTypeEnumeration.Editable},
                  {"ng-model", "dailyInformation.OverTimeFormatted"},
                  {"ng-disabled", "ViewOnlyMode()"},
                  {"ng-keydown", "TradodOverTimeOnKeyDown(dailyInformation, $event)"},
                  {"ng-keyup", "TradodOverTimeOnKeyUp($event)"},
                  {"ng-focus", "TradodOverTimeOnFocus($event)"},
                  {"ng-blur", "TradodOverTimeOnBlur()"},
                  {"data-overtime-index", ""}
                })
            }
            else
            {
              <div style="width: 50px;" ng-if="DailyOverShowType() == @((short)DailyOverShowTypeEnumeration.JustShow)"></div>
            }
          </td>
</tr>

The following line not work:
{“ng-model”, “dailyInformation.OverTimeFormatted”}

and dailyInformation.OverTimeFormatted doesn’t update if I change textbox value !

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/ng-model-not-work-within-ng-if-and-ng-repeat-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com

I want to move focus left right up down in html table

this is C# loops which create html table string from controller

for (int j=0; j< ds.Tables["tblMaster"].Rows.Count;j++)
            {
                html += " <tr>";
                //cell for customer name
                html += "<td class='bg-primary' onclick=CashMemo('"+ fromDate +"','"+ ToDate +"',"+ ds.Tables["tblMaster"].Rows[j]["intPoductId"].ToString() +","+ ds.Tables["tblMaster"].Rows[j]["intCustomerId"].ToString() + ")>" + ds.Tables["tblMaster"].Rows[j]["varName"].ToString()+"</td>";
                if (ds.Tables["tblMaster1"] != null)
                {
                    ds.Tables["tblMaster1"].Clear();
                }
                string query1 = "";                                                                                     //product id                                                  //custemr id                 
                query1 = " spLoadMonthlyDaysName '" + fromDate + "','" + ToDate + "' ," + ds.Tables["tblMaster"].Rows[j]["intPoductId"].ToString() + "," + ds.Tables["tblMaster"].Rows[j]["intCustomerId"].ToString();
                bll.loadData(ref ds, query1, "tblMaster1");
                //loop two for cells
                for (int d=0; d< ds.Tables["tblMaster1"].Rows.Count; d++)
                {
                    html += "<td style='padding: 0 !important;width:20px'>";
                    html += "<input class='form-control' type='text' onkeypress=getDeliveryInfo(" + ds.Tables["tblMaster"].Rows[j]["intCustomerId"].ToString()+","+ ds.Tables["tblMaster"].Rows[j]["intPoductId"].ToString() + ",'"+ ds.Tables["tblMaster1"].Rows[d]["CDate"].ToString()+"',"+ ds.Tables["tblMaster1"].Rows[d]["id"].ToString() + ");keypress(e); ng-model='txtflQty" + d + "' value='"+ds.Tables["tblMaster1"].Rows[d]["flQty"].ToString() + "' style='height: 41px; width:100%; padding: 0 !important;background-color : "+ ds.Tables["tblMaster1"].Rows[d]["CDateColor"].ToString()+"';/>";
                    html += "</td>";    
                }
                html += "</tr> ";
            }

enter image description here

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/i-want-to-move-focus-left-right-up-down-in-html-table/
via @lzomedia #developer #freelance #web #lzomedia.com

Angularjs ngresource getting peoblems for promise and resolve

I have a controller and there I call a service.

  var rowCollection=[];
        allCars.car('getAllcarList').getAllcarList({}).$promise.then(function(data) {
     rowCollection.push(data.cars);

      });
console.log(rowCollection);

After the service call If i want to use the rowCollection it shows undefined as the response till not come.How to stop execution until response come. So that the variable can use any where in the program.
In my service I have code like this

function($resource) {
    var apiResourceUrl='http://127.0.0.1/stock/api/public/index.php/';

    var factory = {};

    factory.allCars= function(queryType)
    {
        var hsRESTUri = apiResourceUrl;

        if (queryType == 'getAllcarList') {
            hsRESTUri = apiResourceUrl + 'getAllcarList';
        }
        return $resource(hsRESTUri, {}, {
            getAllcarList: {
                method: 'GET',
            }
        });
    };
    return factory;

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/angularjs-ngresource-getting-peoblems-for-promise-and-resolve/
via @lzomedia #developer #freelance #web #lzomedia.com

Check that token is valid or invalid using jwt

Hey I have one small problem with token in app. I have middleware to check token in next routes and I use tokne to isLoggedIn function in angular to check logged users. But if I change token in local storage user still is logged because token still exist but is invalid. Could you help how I can response from middleware that token is valid or invalid and next check this in angular? Question: How check that token is valid or invalid in angular? e.g. if token is invalid change route location
Please look on my code:

middleware

router.use(function(req, res, next){
var token = req.body.token || req.body.query || req.headers['x-access-token']  
  if(token){
     jwt.verify(token, secret, function(err,decoded){
        if(err){
           res.json({success:false, message:'Invalid token'})
        } else {
           req.decoded = decoded;
           next()
        }
     })
  } else {
     res.json({ success: false, message:'No token provided' });
  }
});

factory

.factory('AuthToken', function($window){
  var authTokenFactory = {};
  authTokenFactory.setToken = function(token){
    if(token){
        $window.localStorage.setItem('token',token)
    } else {
        $window.localStorage.removeItem('token')
    }

  };
  authTokenFactory.getToken = function(){
    return $window.localStorage.getItem('token')
  }

  return authTokenFactory
})

isLoogedIn function

    authFactory.isLoggedIn = function(){
    if(AuthToken.getToken()){
        return true 
    } else {
        return false
    }
}
return authFactory

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/check-that-token-is-valid-or-invalid-using-jwt/
via @lzomedia #developer #freelance #web #lzomedia.com

Spring Boot ngRoute

I’m trying to make a single page application with a Spring back end and an AngularJS front end. I’ve followed tutorials and looked up similar questions but ngRoute just doesn’t seem to work with a Spring back end (I got it to work with a NodeJS back end).

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>Spring Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="../static/index.js"></script>
</head>

<body ng-app="index" ng-controller="indexController">
    <a href="/test">test</a>
    <div ng-view=""></div>
</body>

</html>

test.html

<div>
    Template loaded
</div>

index.js

'use strict';

const indexModule = angular.module('index', ['ngRoute']);

indexModule.controller("indexController", function indexController($scope) {

});

indexModule.config(function($routeProvider) {
   $routeProvider.when('/test', {templateUrl: 'test.html'});
});

SringDemoController.java

package com.springdemo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class SpringDemoController {

    @RequestMapping({ "/" })
    public String getIndexTemplate() {
        return "index";
    }

}

I get this error when I click the link and the URL changes to http://localhost:8080/test

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/spring-boot-ngroute/
via @lzomedia #developer #freelance #web #lzomedia.com

Is this image confirms me that i have definately installed angular CLI globally or not?

Installation of Angular CLI globally

Does it surely mean that angular CLI globally is installed on my ubuntu ??

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/21/is-this-image-confirms-me-that-i-have-definately-installed-angular-cli-globally-or-not/
via @lzomedia #developer #freelance #web #lzomedia.com

Friday, October 20, 2017

Angular input type="select url"

I have a input where you can type in a URL. Now I also like to add a suggestion list to the input where you can select predefined URLs.

My attempt was to change from type=url to type=select and provide a datalist:

<input type=select list=servers required ng-model=server />
<datalist>
    <option label="Server example 1" value="https://www.google.de/"/>
</datalist>

But now I am missing the URL validation from angular.
Is there a way to combine those two types? Or any other suggestion how I can do that?

Thanks in advance

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/angular-input-typeselect-url/
via @lzomedia #developer #freelance #web #lzomedia.com

How to recompile a div in angular after add dynamic content

i am just adding some dynamic content in a tbody.something like below…

        <tbody id="fileUploadPanel" ng-init="newCtrl.filecount = 1">
        <tr class="fileUploadTemplate">
            <td align="center">
                <img id="image" alt="Img" class="img-responsive pointer" src="../../../Images/new-thumb.svg" height="200" width="200">
            </td>
            <td class="cellClass">
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div class="form-control" data-trigger="fileinput">
                        <i class="glyphicon glyphicon-file fileinput-exists"></i>
                        <span class="fileinput-filename"></span>
                    </div>
                    <span class="input-group-addon btn btn-default btn-file">
                        <span class="fileinput-new">Select file</span>
                        <span class="fileinput-exists">Change</span>
                        <input class="ChooseAPicForOffer" accept="image/*" id="file" type="file" name="file" onchange="angular.element(this).scope().newCtrl.fileNameChanged(this)" />
                    </span>
                    <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                </div>
            </td>
        </tr>
    </tbody>

vm.fileUploadTemplate = '<tr>' + $('.fileUploadTemplate').html() + '</tr>';

    vm.fileNameChanged = function () {
    for (var i = 1; i <= vm.filecount; i++) {
        var fileUpload = $("#file" + i).get(0);
        var file = fileUpload.files;
        if (file && file[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                alert(e.target.result);
                $('#image' + i).attr('src', e.target.result);
                showimage = true;
            };
            reader.readAsDataURL(file[0]);
            angular.element(document.getElementById('fileUploadPanel')).append(vm.fileUploadTemplate);

            //vm.filecount++;
            //var $newfilediv =  $('#fileUploadPanel').append(vm.fileUploadTemplate);
            //angular.element(document).injector().invoke(function ($compile) {
            //    $scope.$apply(function () {
            //        var scope = angular.element($newfilediv).scope();
            //        $compile($newfilediv)(scope);
            //    })
            //})
            //angular.element(document.getElementById('fileUploadPanel')).append($compile(vm.fileUploadTemplate)($scope));

            return false;
        } else {
            $('#image' + i).attr('src', '......Imagesnew-thumb.svg');
        }
    }

here i am using angular ui route and controller as syntax.inside my fileNameChanged() method the commented code i so far try to solve my problem.
referenced from ….
example1 and example2

i also try something…

<input class="ChooseAPicForOffer" accept="image/*" id="file" type="file" name="file" onchange="angular.element(this).scope().newCtrl.filecount++; angular.element(this).scope().newCtrl.fileNameChanged(this)" />

althouth all of above is not working …

not working means when i try to inspect my code then i found that the expression of angular is as it is means
<img id="image" alt="Img" class="img-responsive pointer" src="../../../Images/offer-thumb.svg" height="200" width="200">

the expression is not evaluated…

i dont know what i am doing wrong..please help me….

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/how-to-recompile-a-div-in-angular-after-add-dynamic-content/
via @lzomedia #developer #freelance #web #lzomedia.com

Intercept each http calls an ES6 approach

I wanted to write injectable service in Angular which can intercept all ajax calls. Basically before ajaxStart and after after finished. I am able to achieve by this code-snippets. But I am able to achieve it using es5 syntax. How I can do the same thing by extending XMLHttpRequest which is shown in file no: 3?

1) http-interceptor.ts

import { Injectable, Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

interface AjaxRequest {
    url?: string;
    requestCount?: number;
    method?: string;
}

interface AjaxResponse {
    url?: string;
    requestCount?: number;
    response?: string;
}

@Injectable()
export class HttpInterceptor {

    public ajaxStart = new BehaviorSubject<AjaxRequest>({});
    public ajaxStop = new BehaviorSubject<AjaxResponse>({});

    constructor() {
        this.bootstrapAjaxInterceptor();
    }

    private bootstrapAjaxInterceptor() {

        const _self = this;
        const originalOpen = XMLHttpRequest.prototype.open;

        XMLHttpRequest.prototype.open = function (xhrMethod, requestUrl) {

            _self.ajaxStart.next(requestUrl);

            this.addEventListener('readystatechange', xhr => {

                _self.ajaxStop.next(this.responseURL);

            }, false);

            originalOpen.apply(this, arguments);
        };
    }
}

2) app-component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

    constructor(private httpInterceptor: HttpInterceptor) { }

    ngOnInit() {

        this.httpInterceptor.ajaxStart.subscribe(url => {
            console.log('ajaxStart : ', url);
        });

        this.httpInterceptor.ajaxStop.subscribe(url => {
            console.log('ajaxStop : ', url);
        });
    }
}

3) http-interceptor.ts

@Injectable()
export class HttpInterceptor extends XMLHttpRequest {

    open(xhrMethod, requestUrl) {
        // Equivalent to XMLHttpRequest.prototype.open
        // Now how to handle `readystatechange`
    }

    ajaxStart() { }

    ajaxStop() { }
}

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/intercept-each-http-calls-an-es6-approach/
via @lzomedia #developer #freelance #web #lzomedia.com

ngClass does not update DOM in Promise Callback

I have a Rating Component (Angular) as follows:


import { Component, ChangeDetectionStrategy, Input, NgZone, ApplicationRef} from '@angular/core';
import { Icon } from 'ionic-angular/components/icon/icon';
import { Events } from 'ionic-angular';
//
import { ImageService } from '../../providers/image-service/image-service';
//
@Component({
  selector: 'rating',
  providers: [Icon],
  templateUrl: 'rating.html',
  changeDetection: ChangeDetectionStrategy.OnPush

})
export class RatingComponent {

  static readonly RATING_CHANGE: string = 'ratings-changed';

  text: string;
  private tempscore: number = 0;
  //
  @Input() public score: number = 0;
  @Input() public max: number = 5;
  @Input() public cardIndex: number = 0;
  @Input() public imageID: any = {};

  @Input() public iconFull: string = 'md-thumbs-up';



  constructor(private evts: Events, private imgService: ImageService, 
    private ngZone: NgZone, private appRef: ApplicationRef) {    

  }



  public icons(): string[] {
    let step = 1;
    this.score = Math.ceil(this.score / step) * step;

    let icons = [];
    for (let i = 1; i <= this.max; i++) {
      //
      icons.push(this.iconFull);
    }
    return icons;
  }


  public update(index: number) {

    this.score = index + 1;

    let vote_obj = {
      imageid: this.imageID,
      vote: this.score
    }


    this.imgService.vote_image(vote_obj).then((res) => {
      if (res['ResponseCode'] != 200) {
        console.log(JSON.stringify(res));
        //
        this.score = 0;
        this.ngZone.run(() => {
          console.log('score is now:  ' + this.score);
          this.appRef.tick();
        })
      } else if (res['ResponseCode'] == 200) {
        //        
      }
    })
  }

}


The Above Component represents the following HTML:

<ul>
  <li *ngFor="let icon of icons(); let i = index" (click)="update(i)" 
  [ngClass]="{'inactive':score <= i , 'active':score > i}">
    <ion-icon [name]="icon"></ion-icon>
  </li>
</ul>

There are 2 CSS classes that are supposed to be used for manipulating the DOM.

The ngClass perfectly renders the icon’s color on CLICK. That is when I change the score variable inside the click handler for the first time. But I also require to set the icon color to its default value if the ‘ResponseCode‘ is other than 200 – therefore resetting the score variable to its default zero does not update the ngClass on the DOM

I also tried to update the score variable from inside the ngZone.run() – but with no result !!

What goes wrong with the code above ?

But if I refresh the page (for example with a pull-to-refresh handler) the icons are applied with correct CSS. How do I do this without refreshing the page ?

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/ngclass-does-not-update-dom-in-promise-callback/
via @lzomedia #developer #freelance #web #lzomedia.com

Realtime notification implementation in Laravel

I am developing an ERP using Laravel and Angulajrs, Now I want to implement real time notification in my application like facebook live notification,

I have done bit research and I found socket.io is using to implement this, how can I use this in my laravel application?

Or is there any other good approach to implement this?

I am using windows for development and hosting in ubuntu.

Please help to me reach in a good solution

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/realtime-notification-implementation-in-laravel/
via @lzomedia #developer #freelance #web #lzomedia.com

Step by step implementation of angular-gridster2

I am new to angular 4 and I need to implement angular-gridster2 here is the link https://github.com/tiberiuzuld/angular-gridster2. Could anybody tell me which portion of code goes to which file … infact step by step implementation of angular-gridster2. thnku

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/step-by-step-implementation-of-angular-gridster2/
via @lzomedia #developer #freelance #web #lzomedia.com

Angular how can i get the input value of appended element

I have here my code of html basically its an color picker and a textbox when user pick a color i’m appending the value to the color hex texfield and user can add multiple colors i’m appending those two inputs when user click on add more it will add another set of two inputs but how do i get the colors that the user add and maybe push it to an array? Please help i would really appreciate it. Thankyou!

    <div class="add_items_color_container" id="colors">
      <input type="text" readonly data-wheelcolorpicker="" data-wcp-preview="true" data-wcp-format="css" class="color">
      <input type="text" class="color_hex">
    </div>

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/angular-how-can-i-get-the-input-value-of-appended-element/
via @lzomedia #developer #freelance #web #lzomedia.com

Upload file to a directory using angularJs FileUploader

I’m uploading a file to a directory using a Web Service in Angular Js by using the module ‘FileUploader’. When i click on the button upload, the file is uploaded to the directory. When I upload a file again and the click on the button upload, the file is not uploaded. It seems like it is not being reset.

This is the code in my controller :

var uploader = vm.uploader = new FileUploader({
        url: WS link,
        alias: 'file'
    });

    // FILTERS

    // a sync filter
    uploader.filters.push({
        name: 'syncFilter',
        fn: function (item, options) {
            return this.queue.length < 10;
        }
    });

    // an async filter
    uploader.filters.push({
        name: 'asyncFilter',
        fn: function (item, options, deferred) {
            setTimeout(deferred.resolve, 1e3);
        }
    });

    // CALLBACKS      
    uploader.onBeforeUploadItem = function (item) {
    };

    uploader.onCompleteItem = function (fileItem, response, status, headers) {

        if (status != 200) {
            vm.enableMsg = true;
        } else {
            $scope.attachmentId = response.File;
            alertService.success("Fichier uploadé");
            vm.fileSelect = '';
            vm.enableMsg = true;
        }

    };
    uploader.onCompleteAll = function () {

    };

This is the html page containing the button upload, making the call to the Fileuploader module. The name of the controller is test.

  <input type="file" nv-file-select="test.fileSelect" uploader="test.uploader">
  <a ng-click="test.uploader.uploadAll()"><span class="fa fa-upload"></span></a>

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/upload-file-to-a-directory-using-angularjs-fileuploader/
via @lzomedia #developer #freelance #web #lzomedia.com

How to deploy automatically Laravel app with embedded Angular app to Heroku

I have a test app in GIT which has Laravel project and Angular SPA.

I have webpack, which builds the angular app and copies its files to /public/ folder of Laravel. To build angular, I run command npm run build

I have successfully deployed my laravel app to heroku but I am unable to deploy angular part correctly. I just need that during the deployment process on Heroku dyno it runs also a command like following

cd angular-app && npm run build

I have seen few tutorials and they talk about using nodejs server on Heroku. But I do not understand why I would need Node server on heroku when Nginx with Laravel will deliver all contents. I just need the angular app to be compiled.

Is there a way to run build commands on PHP, Nginx, Laravel dyno in Heroku?

Please help.

My Procfile (name of the file which Heroku uses) is

web: vendor/bin/heroku-php-nginx  public/

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/how-to-deploy-automatically-laravel-app-with-embedded-angular-app-to-heroku/
via @lzomedia #developer #freelance #web #lzomedia.com

UI Select Match value for binding when performing UPDATE

I am trying to make an UPDATE window.
If I bring the data with $scope.project_data, it works for the INPUT TYPE=”TEXT”. But, not for the UI-Select.

I think I have to make some changes to UI-SELECT-MATCH. But, I am not sure how to bind the SQL data to UI-SELECT-MATCH on the instance when the window is brought up.

[HTML]

<!-- This works. -->

<input type = "text" class = "form-control" ng-model = "project_data.project_title" id = "project_title" required/>



<!-- This does NOT work. -->

<ui-select ng-model = "project_customer_company.selected" theme="bootstrap" id="project_customer_company">
  <ui-select-match></ui-select-match>
  <ui-select-choices repeat="customer in customers | filter: $select.search">
    <div ng-bind-html="customer.customer_company_name | highlight: $select.search"></div>
    <div ng-bind-html="customer.customer_company_ceo | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

[Controller.JS]

//This is to bring data from SQL table.

$http.post("../crud/projects_read.php", {
    })
    .then(function(response){
        $scope.projects = response.data;
        $scope.project_data = $scope.projects[$stateParams.id];
    });



$scope.updateData = function(project_id){
    $http.post("../crud/projects_update.php",{
        project_id : $scope.project_data.project_id,    
        project_title : $scope.project_data.project_title, 
        project_customer_company : $scope.project_customer_company.selected.customer_company_name
})

If I do console.log(project_customer_company);, then it appears good from the SQL.

When I run the application, the UI-Select-Match won’t bring the data nor update it.

You may wonder why I didn’t put “project_data.” in front of anything in UI-SELECT, but I tried. I left it out so it looks better for you the experts to check.

In conclusion, it is like this:

Step 1. The project_data bring the data from the SQL. (it works fine)

Step 2. It should bind to the UI-Select-Match when the window for update is brought up.

Step 3. Other UI-Select-Choices comes from other array (it works fine)

So the problem is the Step 2. Please help me on this issue!

I hope this helps the others as well.

Thank you in advance!!

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/20/ui-select-match-value-for-binding-when-performing-update/
via @lzomedia #developer #freelance #web #lzomedia.com

Thursday, October 19, 2017

Controller method on button click of custom directive ? angular js

I have my custom directive to upload file like this in parent html

  <uploading-multiple-files controlmodel="serviceProfile.serviceProfileAttachments" upload-all-action="uploadAll"  delete-action="deleteImage"  attachment-type-id="scopeTypeId" url="scopeUrl" enable-upload="enableUpload"></uploading-multiple-files>

In parent controller the code for deleteAction is

  $scope.deleteImage = function (attachment) {

        alert(attachment.id);
   }

my uploadAllAction is working now i want to implement deleteAction in similar way here is its implementation

         function uploadingMultipleFiles(FileUploader, $rootScope, $http, $filter, $window, browser) {
    return {
        replace: false,
        scope: {
            'attachmentTypeId': '=?',
            'controlmodel': '=',
            'url': '=',
            'maxsize': '=?',
            'uploadAllAction': '=?',
            'deleteAction': '=?',
            "counter": '=?',
            "enableUpload": '=?',
            "isRequired": '=?'
        },
        templateUrl: '/app/views/Controls/UploadingMultipleFilesDirective/UploadingMultipleFilesDirectiveTemplate.html',
        link: link
    };

Now i want to initialize my method

  <div class="col-md-6" ng-repeat="item in controlmodelFiltered">
                            <div class="col-md-12">
                                <button class="info" ng-click="delete(item)">x</button>


                            </div>  
                      </div>

So ng-click="delete(item)" in directive used to initialize the deleteAction

    scope.delete = function (attachment) {
                debugger;
                scope.deleteAction(attachment);    //error delete action is not defined

            }

when i click delete button the directive js initialize the deleteAction with attachment and it should call controller method then defined in directive
but i get error

TypeError: scope.deleteAction is not a function

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/controller-method-on-button-click-of-custom-directive-angular-js/
via @lzomedia #developer #freelance #web #lzomedia.com

Repeating twice in sum function

I have a function for total in data but it is repeating the result twice. anyone can help me?

function groupBy(arr, key) {
            var newArr = []
                , types = {}
                , newItem, i, j, cur;
            for (i = 0, j = arr.length; i < j; i++) {
                cur = arr[i];
                if (!(cur[key] in types)) {
                    types[cur[key]] = {
                        type: cur[key]
                        , data: []
                    };
                    newArr.push(types[cur[key]]);
                }
                types[cur[key]].data.push(cur);
            }
            return newArr;
        };
        Array.prototype.sum = function (prop) {
            var total = 0
            for (var i = 0, len = this.length; i < len; i++) {
                total += parseInt(this[i][prop])
            }
            console.log(total);
            return total;
        }
        $scope.totalCreadit = function (st) {
            return st.sum("credits");
        }

data

 var users = [
            {
               "creditType": "Transfer"
              ,"credits": "50"
            }, {
                "creditType": "Transfer"
              ,"credits": "50"
            }
            , {
                 "creditType": "Bought"
              ,"credits": "50"
            }
            , {
                  "creditType": "Spent"
              ,"credits": "50"
            }
            , {
                 "creditType": "Award"
              ,"credits": "50"
            }
            , {
             "creditType": "Received"
              ,"credits": "50"
            }];
                        $scope.items = groupBy(users, "creditType");

It is perfectly displaying the creditType and the total. but when console.log(total) the total is repeating twice. I need to use the total of credits to display chart.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/repeating-twice-in-sum-function/
via @lzomedia #developer #freelance #web #lzomedia.com

AngularJS – Why is ng-mouseleave not woking properly?

I’m posting my code, because for the sake of me, I can’t figure out why ng-mouseenter and ng-mouseleave are not working properly… They fire correctly only when the mouse enters and leaves from the side(left/right) and with the mouseleave still sometimes it doesn’t fire up.. I can’t use css to apply the needed classes, because I have to watch for a ctrl key press event, so I have to stick to the ng-mouseenter/leave. I tried also with ng-mouseover/out – they’re almost not working at all. Any idea why that is and how to fix it? I would be very thankful.

view.html

<div ng-controller="ControlCenterViewController as controlCenter">
   <div class="controlcenter" ng-repeat="cat in controlCenter.categories">
      <div class="controlcenter-category"></div>

      <div class="controlcenter-shortcut" ng-repeat="shortcut in cat.exts"
            ng-click="controlCenter.onSelect(shortcut, $event)" ng-class="class" 
           ng-mouseenter="controlCenter.hoverIn($event, shortcut)" ng-mouseleave="controlCenter.hoverOut($event, shortcut)">
                  <span class="shortcut-remove hidden-shortcut">
                  <clr-icon shape="times-circle" class="is-error" size="12"></clr-icon>
                  </span>
                  <span class=" controlcenter-shortcut-icon-display" ng-if="controlCenter.hasClass(shortcut)"></span>
                  <img class="controlcenter-shortcut-icon" ng-src="" ng-if="!controlCenter.hasClass(shortcut)"/>
               <div data-test-id="" class="controlcenter-shortcut-label"></div>
      </div>
   </div>
</div>

controller.js

    function hoverIn(event, shortcut){
        if(perspectivesService.isEditEnabled()){
            console.log('hover in fired');
            var target = angular.element(event.target).find('span.shortcut-remove');
            if(event.ctrlKey){
                target.removeClass('hidden-shortcut');
                target.addClass('current-shortcut');
            }
        }
    }

    function hoverOut(event, shortcut){
        if(perspectivesService.isEditEnabled()){
            console.log('hover out fired');
            var target = angular.element(event.target).find('span.shortcut-remove');
                target.removeClass('current-shortcut');
                target.addClass('hidden-shortcut');
        }
    }

css

.hidden-shortcut {
   display: none;
}

.current-shortcut {
   display: block !important;
}

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/angularjs-why-is-ng-mouseleave-not-woking-properly/
via @lzomedia #developer #freelance #web #lzomedia.com

alert after click chip in materialize in Angularjs

I have the following chip with materialize:

<div class="chip">
  tag
  <i class="close material-icons" ng-click="hide_chip(this)">close</i>
</div>

my controller:

$scope.hide_chip = function(elem){
        var r = confirm("Are you sure?");
        if (r == true) {
            var chip = elem.parentNode;
            chip.style.display = 'none';
        }
    }

I want to know how to show an alert when user clicks the close icon?
the alert should have yes or no button if it is yes the chip close, but if user click no the chip does not close

My error is “chip is undefined”, and when r is false the chip disappears

Someone can help me? thanks

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/alert-after-click-chip-in-materialize-in-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com

form.$invalid is not working for angular ui date picker

i have two fields due date and a text filed enter a number

due date which is a date picker ,either we can select date from date picker or

we can set date by entering number in second text field.

button create will be enabled if i manually set the date field from date picker but but it is not enabling if i set date picker value by entering text field

can anybody tell me why this is happening.
this is jsfiddle link fiddle

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/form-invalid-is-not-working-for-angular-ui-date-picker/
via @lzomedia #developer #freelance #web #lzomedia.com

AngularJS, Why my url show "#!" what happened? [duplicate]

This question already has an answer here:

i used ui.router

this is my code:
Code

this is my test result:
Result

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/angularjs-why-my-url-show-what-happened-duplicate/
via @lzomedia #developer #freelance #web #lzomedia.com

How to unset a field in Mongoose with findByIdAndUpdate [duplicate]

This question already has an answer here:

I use MEAN stack. On my backend I use findByIdAndUpdate function in Mongoose to do the update operation in CRUD. I also use Bootstrap UI date picker. On “clearing” of the date, uib-datepicker-popup resets the scope value for the date field to undefined. Now I pass the scope resource object into Mongoose with a HTTP PUT angular $resource call, it won’t pass the null properties in the json object. My date field is simply missing and unpopulated in the json object and PUTting out. Therefore The original date stays and I failed to reset the date field in the MongoDB document.

How should I approach deleting a certain field, then, as in unsetting with Mongoose built in “findByIdAndUpdate”?

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/how-to-unset-a-field-in-mongoose-with-findbyidandupdate-duplicate/
via @lzomedia #developer #freelance #web #lzomedia.com

Hover event in toastr angularjs

I use this library : https://github.com/CodeSeven/toastr . I want some event like ajax when I hover in toastr . I tried something like :

$('#toastr-container).on('mouseenter',function(){
 //do something
})
toastr.info.on('mouseenter',function(){
 //do something
})

but no work . How can I do this . Please help me

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/hover-event-in-toastr-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com

Dynamic update style for Div tag using angular

<div id="" class="progress_bar_filled"  style="width: 0%;"></div>

i need to dynamic update style="width:0%" by using angular according to dynamic created div id as above id="" .

i refer to below link no luck something missing

Set style for a div using angular Scope value

Thanks for help

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/dynamic-update-style-for-div-tag-using-angular/
via @lzomedia #developer #freelance #web #lzomedia.com

ng-include of inline SVG does not display gradient except in Chrome

I have setup an NG-INCLUDE which loads an SVG file that has classes “hover_color_change” so that the correct polygons can have their fill attribute updated:

<div class="prod-illustration-div col s12 m8">
   <div class="prod-svg-wrapper" ng-include="'/img/illustrations/illustration_' + productIdObj.illustration + '.svg'" onload="defaultFill(productIdObj.colors)">
    </div>
</div>

I then have color swatches which trigger the $scope.hoverColorText() which calls the updateSVGFill() method to display the SVG fill matching the hover color and creates a shading of gradient so it’s not a solid color.

Here is live link – WORKS IN CHROME

In Chrome it works, however, in Safari, FF, Edge, it does not. I referenced this suggested answer which suggests referencing the ID attribute, which I believe I am already doing:

    $scope.defaultFill = function (colors) {
        if (colors) {
            var defaultColor = colors[Object.keys(colors)[0]];
            createGradient($('svg')[0], 'MyGradient', [
                { offset: '10%', 'stop-color': createShade(defaultColor, 0.2) },
                { offset: '100%', 'stop-color': defaultColor }
            ]);
            updateSvgFill();
            return true;
        }
    };

    $scope.hoverColor = ' ';
    $scope.hoverColorText = function (selectedHover) {
        if (selectedHover.hex) {
            $scope.hoverColor = selectedHover.color;
            updateGradient(selectedHover.hex);
        }
    };

    function updateGradient(color) {
        $('linearGradient#MyGradient #stop-0').attr('stop-color', createShade(color, 0.2));
        $('linearGradient#MyGradient #stop-1').attr('stop-color', color);
    }


    function createGradient(svg, id, stops) {
        var svgNS = svg.namespaceURI;
        var grad = document.createElementNS(svgNS, 'linearGradient');
        grad.setAttribute('id', id);
        for (var i = 0; i < stops.length; i++) {
            var attrs = stops[i];
            var stop = document.createElementNS(svgNS, 'stop');
            stop.id = 'stop-' + i;
            for (var attr in attrs) {
                if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]);
            }
            grad.appendChild(stop);
        }

        var defs = svg.querySelector('defs') || svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);
        return defs.appendChild(grad);
    }

    function createShade(color, percent) {
        var f = parseInt(color.slice(1), 16), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent, R = f >> 16, G = f >> 8 & 0x00FF, B = f & 0x0000FF;
        return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
    }

    function updateSvgFill(hex) {
        $('.hover_color_change').attr('fill', 'url(#MyGradient)');
    }

So: am I including this SVG asset correctly with an NG-Include?

Naturally, if I remove fill changes work fine on hover.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/19/ng-include-of-inline-svg-lineargradient-does-not-display-gradient-except-in-chrome/
via @lzomedia #developer #freelance #web #lzomedia.com

Wednesday, October 18, 2017

how to merge multiple auto search fields into one in angular

MarketedProgramService.getMarketedPrograms().then(function( programs ) {
        $scope.programs = [];
        var userPrograms = $filter("filter")( programs, 
MarketedProgramService.userHasAccessToProgram.bind( null, UserProfile ) );
        //userPrograms.unshift( defaultProgram );

        // Exclude FirstComp/Maverick programs
        angular.forEach( userPrograms, function( program ) {
            if( program.mbu != "FC" ) {
                $scope.programs.push( program );
            }
        });
    });

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/how-to-merge-multiple-auto-search-fields-into-one-in-angular/
via @lzomedia #developer #freelance #web #lzomedia.com

jQuery Datatable’s fnReloadAjax() equivalent in Angular UI Grid

I’m using a form to add data to the database and an Angular UI grid with pagination to show database data in the front. I want to reload the Angular UI gird every time I submit the form.

In jQuery I have used ,

function submitForm() {
    .
    .  /* form submitting process */
    .
    $('#datatable').dataTable().fnReloadAjax(); // to reload table
}

In AngularJs I used ,

(as mentioned in this)

$scope.submitForm = function() {
    .
    .  /* form submitting process */
    .
    $scope.gridApi.core.refresh();  // to reload table
}

$scope.gridApi.core.refresh() is not working and it doesn’t give the expected result as fnReloadAjax().

I want to know how to get the fnReloadAjax() result in Angular UI grid


further – here is my gridOptions code.

  $scope.gridOptions = {
            paginationPageSizes: [5, 10, 20],
            paginationPageSize: 5,
            columnDefs: [
                {name: 'name', enableColumnMenu: false},
                {name: 'username', enableColumnMenu: false}
            ]
            , onRegisterApi: function (gridApi) {
                           $scope.gridApi = gridApi;
                           gridApi.pagination.on.paginationChanged(
                                     $scope,
                                     function (newPage, pageSize) {
                                       .
                                       .
                                       . 
                                     });
                             }
                       };

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/jquery-datatables-fnreloadajax-equivalent-in-angular-ui-grid/
via @lzomedia #developer #freelance #web #lzomedia.com

How to use function values for zingcharts in angularjs?

I have function for dynamically get the data and total for particular items. it is working fine. now i am trying to make a chart fro the data.

var app = angular.module("app", ['zingchart-angularjs']);app.factory('itemsFactory', function ($http) {
var factory = {};
factory.getItems = function () {
    return $http.get('.//davidstrans.json')
};
return factory: });
app.controller('UsersTransController', function ($scope, itemsFactory) {
itemsFactory.getItems().success(function (data) {
    $scope.users = data;
    $scope.items = groupBy($scope.users, "creditType");
    $scope.valuesOne = [];
    $scope.aValues = [$scope.valuesOne];
});

this is the function for dynamically seperate the types;

function groupBy(arr, key) {
    var newArr = []
        , types = {}
        , newItem, i, j, cur;
    for (i = 0, j = arr.length; i < j; i++) {
        cur = arr[i];
        if (!(cur[key] in types)) {
            types[cur[key]] = {
                type: cur[key]
                , data: []
            };
            newArr.push(types[cur[key]]);
        }
        types[cur[key]].data.push(cur);
    }
    return newArr;
};
Array.prototype.sum = function (prop) {
    var total = 0
    for (var i = 0, _len = this.length; i < _len; i++) {
        total += parseInt(this[i][prop])
    }
    return Math.abs(total);
    return total
}
$scope.totalCreadit = function (subtotal) {
    return subtotal.sum("credits");
    console.log(subtotal.sum("credits"));
}

In this function type[] is my group of list and data[] is my total this is working perfectly.

I need to convert this into a chart. how to use $scope.valuesOne= data[] as my values. i tried alot i’m not able to find it. can anyone help me?

html

<div ng-app="app" ng-controller="UsersTransController">
    <div style="height:100px">
        <ul>
            <li ng-repeat="j in items"> - </li>
        </ul>
    </div>
    <div zingchart id="chart-1" zc-json="myJson" zc-width="500px" zc-height="300px" zc-values="aValues"></div>

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/how-to-use-function-values-for-zingcharts-in-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com

How I can share the value between two pages in ionic v-1

I am trying to add the value of both pages on selection.
It is adding on individual pages. But while I am moving to the next page the Total value comes Zero. I am trying to add pass total added value from one page to another page.
As I search , I found that there is a need to create a service controller to call a global scope value.

<!-- page one view page -->

<ion-content class="search-main padding">
        <div class="list card">
        <div class="item item-body no-padding stable">
                <div class="row no-padding border-bottom" ng-controller="Ctrl3">
                <div class="col padding border-right" ng-click="openDateCheckIn()">
                        <div class="margin-bottom-10" style="color:#0c60ee;"><i class="icon icon-money"></i> Total Value =></div>
                </div>
        <div class="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; <b></b></h2></div>
                </div>ass="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; </h2></div>
                </div>
 <div ng-controller="Ctrl1">   
<div ng-repeat="gender in genders">
    <div class="row row-no-padding no-margin padding-important" style="color: #000;">
            <div class="col col-70"><i class="ion ion-ios-circle-filled"></i> <span>&nbsp;</span></div>
            <div class="col col-20"><span>Rs </span></div>
        <div class="col col-10"><div><label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"><div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"><input id="" type="checkbox" value="" ng-checked="selection.indexOf(gender) > -1" ng-click="toggleSelection(gender)" /><i class="checkbox-icon"></i></div><div class="item-content disable-pointer-events" ng-transclude=""></div></label></div>
        </div></div>
     </div></div>

</ion-content>
<!-- Page two view page -->

<ion-content class="search-main padding">
        <div class="list card">
        <div class="item item-body no-padding stable">
                <div class="row no-padding border-bottom" ng-controller="Ctrl3">
                <div class="col padding border-right" ng-click="openDateCheckIn()">
                        <div class="margin-bottom-10" style="color:#0c60ee;"><i class="icon icon-money"></i> Total Value =></div>
                </div>
        <div class="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; <b></b></h2></div>
                </div>
 <div ng-controller="Ctrl2">   
<div ng-repeat="gender in genders">
    <div class="row row-no-padding no-margin padding-important" style="color: #000;">
            <div class="col col-70"><i class="ion ion-ios-circle-filled"></i> <span>&nbsp;</span></div>
            <div class="col col-20"><span>Rs </span></div>
        <div class="col col-10"><div><label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"><div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"><input id="" type="checkbox" value="" ng-checked="selection.indexOf(gender) > -1" ng-click="toggleSelection(gender)" /><i class="checkbox-icon"></i></div><div class="item-content disable-pointer-events" ng-transclude=""></div></label></div>
        </div></div>
     </div></div>
        
</div>
</div> 

</ion-content>

Controller page —

//Ladies Makeup Party
.controller('Ctrl1', function($scope ,$rootScope) {
    $scope.genders=[{
    'id':'Krylon Party Makeup', 'value':2000 },
    {'id':'Makeup Studio', 'value':2200 },
    {'id':'Party Makeup(MAC)', 'value':2500 },
    {'id':'Party Mackeup(Airbrush)', 'value':3500 }     
    ];
      $rootScope.selection=[];
      $scope.toggleSelection = function toggleSelection(gender) {
        var idx = $scope.selection.indexOf(gender);
        if (idx > -1) {
          $scope.selection.splice(idx, 1);
         }
         else {
           $scope.selection.push(gender);        
         }
      };
    })

//Ladies Makeup Pre-bridal
.controller('Ctrl2', function($scope ,$rootScope) {
    $scope.genders=[{
    'id':'Silver', 'value':10000 },
    {'id':'Gold', 'value':12000 },
    {'id':'Platinum', 'value':16000 }                
    ];
      $rootScope.selection=[];
      $scope.toggleSelection = function toggleSelection(gender) {
        var idx = $scope.selection.indexOf(gender);
        if (idx > -1) {
          $scope.selection.splice(idx, 1);
         }
         else {
           $scope.selection.push(gender);        
         }
      };
    })

// Add total value on select
 .controller('Ctrl3', function($scope ,$rootScope) {
    
   $rootScope.rootSum=function(){
        var total=0;
        for(var i = 0; i < $rootScope.selection.length; i++){
        var product = $rootScope.selection[i];
        total += (product.value);
    }
    return total
      }; 

    }) *

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/how-i-can-share-the-value-between-two-pages-in-ionic-v-1/
via @lzomedia #developer #freelance #web #lzomedia.com

Blob image display HTML using Angular.js

I stored image in MySQL with the blob datatype. Now I am getting response rs like 59e5dfa826ea3.png in Angular. How can I get rs to base64 like this using Angular:

data/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAAAziVBORw0KGgoAAAANSUhEUgAAANIAAAAziVBORw0KGgoAAAANSUhEUgAAANIAAAAziVBORw0KGgoAAAANSUhEUgAAANIAAAAziVBORw0KGgoAAAANSUhEUgAAANIAAAAz.

I stored in blob, image is HTML5 canvas sign image database.

$http({
    method: "GET",
    url: "xyx.php"
}).then(function (response) {
    var data = response.data;
    var rs = data[0].img;
})

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/blob-image-display-html-using-angular-js/
via @lzomedia #developer #freelance #web #lzomedia.com

CORS issue between web/android/ios

when trying to $.ajax to fetch some content from other websites in my website, I got the error.

Failed to load https://www.pinterest.com/: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100‘ is therefore not allowed access.

I knew if the target website didn’t allow localhost:8100 to fetch the data, I cannot fetch it in the client side on the web.

However, I found that mobile app (not mobile browser, but android/ios application) does not have the issue, they can simply get the website content by their default mobile built-in HTTP get function.

Do i want to ask why mobile will not encounter CORS issue (mobile can fetch the webcontent simply by the built-in http get function)?

thanks.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/cors-issue-between-webandroidios/
via @lzomedia #developer #freelance #web #lzomedia.com

bootstrap class=filestyle in ng-repeat angularjs 1.x

I have a form where in i have below code, where i need a file upload control for every object in ng-repeat along with drop down and label. Its rendering fine. For my file upload control, i am using bootstrap “filestyle” class to make it beautiful but the problem is that Filestyle class is not getting applied in ng-repeat. I know that we have limitation that ng-repeat does not apply css class on its elements easily. Can anyone help me with this as i need to apply class=filestyle on each file upload control.

<table class="table table-striped">
                    <thead>
                        <tr>
                            <th style="width: 50%;">Files</th>
                            <th style="width: 20%;">File Type</th>       
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="file in allFiles">
                            <td>
                                <input type="file" id="rr" class="filestyle" 
                                    ng-model="fileInfo" data-show-review="false" onchange="angular.element(this).scope().somefunction(this)">
                                <p></p>
                            </td>                            
                        </tr>
                    </tbody>
                </table>

Funny thing is, when open the form in chrome, file upload control appears as normal html file upload control, but when i duplicate the tab, the class=filestyle is applied the file upload control changes to bootstrap one.
I am using angulasjs 1.x

Thanks in advance.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/bootstrap-classfilestyle-in-ng-repeat-angularjs-1-x/
via @lzomedia #developer #freelance #web #lzomedia.com

Show AngularJS Dropdown Multiselect checkeds

I was made a simple dropdownList using AngularJS Dropdown Multiselect and II’d like to show in page the names Ids checkeds but it is showing only the IDs.

enter image description here

How can I do It ?

Below or in my GitHub code:
GitHub: all code here to download

  • Html page: index.html
  • Angular app: “MyApp.js”
  • DropDown directive: AngularJS Dropdown Multiselect

    Html page: index.html

enter image description here

Angular app: “MyApp.js”
enter image description here

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/show-angularjs-dropdown-multiselect-checkeds/
via @lzomedia #developer #freelance #web #lzomedia.com

how can i dispaly mysql blob image inside html using angualrjs

using below php code i am store image in MySQL blob datatype.. now i am getting response like "59e5dfa826ea3.png" in angular.But how can i get this image "59e5dfa826ea3.png" to base64 like this using angular:

data/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAAAzCAYAAADigVZlAAAQN0lEQVR4nO2dCXQTxxniVBORw0KGgoAAAANSUhEUgAAANIAAAAzCAYAAADigVZlAAAQN0lEQVR4nO2dCXQTxxnHiVBORw0KGgoAAAANSUhEUgAAANIAAAAzCAYAAADigVZlAAAQN0lEQVR4nO2dCXQTxxnH

<?php
     list($type, $xp_signature) = explode(';', $xp_signature);
     list(, $xp_signature)      = explode(',', $xp_signature);

     $data = base64_decode($xp_signature);
     $data = str_replace('data:image/png;base64,', '', $xp_signature);

     $data = str_replace(' ', '+', $data);
     $data = base64_decode($data);
     $file =  uniqid() . '.png';

      $success=file_put_contents($file, $data);

?>
     <img data-ng-src="">

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/how-can-i-dispaly-mysql-blob-image-inside-html-using-angualrjs/
via @lzomedia #developer #freelance #web #lzomedia.com

bind a table from an object in angular

i need to bind a table from an object in angular. when i submit my form i get the object and i send from component 1 to component 2, but when i create another object in my table only i see the last insert. HEre´s my code

component n°2


     import { Component, OnInit } from '@angular/core';
     import { ClienteDetalleComponent} from './cliente-detalle.component';
     import { FormGroup, FormControl, Validators } from '@angular/forms';
     import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
     import { Cliente } from '../../clases/cliente';
     import { CoreService } from '../../services/core.service';


    @Component({
    selector: 'app-cliente-deuda',
    templateUrl: './cliente-deuda.component.html',
    styles: []
    })
    export class ClienteDeudaComponent implements OnInit {
     data: Cliente;
    constructor(private coreService: CoreService) {}

      ngOnInit() {
       this.data = this.coreService.getData();

    }
  }

and this is my urlTemplate

<h4>Detalle de Deudas</h4>
<table class="table table-hover">
    <thead>
        <tr>
            <th>Acreedor</th>
            <th>TipoDeuda</th>
            <th>Situación</th>
            <th>Propuestas</th>
            <th>Monto Deuda</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>

        </tr>
    </tbody>
</table>

in this.data i have all my prop of the object, but i cannot display in a table or grid.

thanks a lot!

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/bind-a-table-from-an-object-in-angular/
via @lzomedia #developer #freelance #web #lzomedia.com

Tuesday, October 17, 2017

How to return asyncronously return data from firebase to devextreme grid in angular 4

Good day, could you help me with the question?

I’m trying to receive data from firebase to devextreme component.
I’m using angular4.

Here is the code of my html page:

<dx-data-grid [dataSource]="priorities">
<dxi-column dataField="Priority"></dxi-column>
</dx-data-grid>

In the class of my component I receive the data from database this way:

ngOnInit() {

this.ds.list('priority').valueChanges().subscribe(
  data => {
    console.dir(data)
    for(var k = 0; k<data.length; k++){
      var prior = new priority();
      prior.Prioritie = data[k].toString();
      this.priorities.push(prior);
    }
    console.dir(this.priorities);}

where priorities is priorities: priority[] = [];

I receive the data from the database and create all the priotiry objects, but my devextreme component shows “No data”. What do I need to do to get it filled?

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/17/how-to-return-asyncronously-return-data-from-firebase-to-devextreme-grid-in-angular-4/
via @lzomedia #developer #freelance #web #lzomedia.com

(AngularJS) Routing with Dynamic Parameters

In the department.component.html view, I input a checkboxes per row, so users can select which department they would like to delete.

<tr *ngFor="let department of departments ;trackBy: trackId">
               <td>

                    <input type="checkbox"
                           (change)="getSelectedDepartmentID(department)"
                           [checked]="department.checked"
                           id="checkbox_"
                     />

                </td>
</tr>

<!-- this is the delete button -->
    <div class="row">
        <div class="col-sm-4">
        <button type="button"
                (click)="deleteSelectedDepartments()"
                replaceUrl="true"
                class="btn btn-danger btn-sm">
            <span class="hidden-md-down" jhiTranslate="entity.action.delete">Delete Department</span>
        </button>
        </div>
    </div>

In the department.component.ts view

The getSelectedDepartmentID function aims to retrieve the department ID that the user has chosen to delete.

The deleteSelectedDepartment aims to call a popup component to get confirmation from the users.

 getSelectedDepartmentID(department:any) {

    var department_id: number;
    department_id = department.id;


    if(this.selectedDepartment == null || !this.selectedDepartment.hasOwnProperty(department_id)) {
        this.selectedDepartment[department_id] = true;
    } else if(this.selectedDepartment.hasOwnProperty(department_id)) {
        if(this.selectedDepartment[department_id]) {
            this.selectedDepartment[department_id] = false;
        } else {
            this.selectedDepartment[department_id] = true;
        }
    }  //if else

}

deleteSelectedDepartments() {

    for(var key in this.selectedDepartment) {
        var value = this.selectedDepartment[key];
        if(value) {

            this.router.navigate(['department-checkbox-delete'], { queryParams: this.selectedDepartment});

        }
    }

}

The problem lies in the “this.router.navigate” portion. As selectedDepartment consists of a key-value pair, I do not know how to add it to the router.navigate method, or rather the route.ts file.

I’m not super proficient in angularjs, just started out.

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/17/angularjs-routing-with-dynamic-parameters/
via @lzomedia #developer #freelance #web #lzomedia.com

angular moment date time picker timezone directive issue

The following code shows a date time picker in a form and i am using angular-moment-picker plugin as picker. When i pick a certain date/time it shows right time in the picker input box, but after the form is submitted the time entered in db is lagging behind. So i used a timezone directive from a stackoverflow answer. But it throws viewValue.getMinutes is not a function error

<div moment-picker="startTime" class="form-control"  name="startTime" 
  ng-model="shiftTimings.startTime" format="YYYY-MM-DD HH:mm:ss" datepicker-localdate > 
      </div>

Directive

app.directive('datepickerLocaldate', ['$parse', function ($parse) {
        var directive = {
            restrict: 'A',
            require: ['ngModel'],
            link: link
        };
        return directive;

        function link(scope, element, attr, ctrls) {
            var ngModelController = ctrls[0];

            ngModelController.$parsers.push(function (viewValue) {

                viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset());

                return viewValue.toISOString().substring(0, 10);
            });


            ngModelController.$formatters.push(function (modelValue) {
                if (!modelValue) {
                    return undefined;
                }

                var dt = new Date(modelValue);

                dt.setMinutes(dt.getMinutes() + dt.getTimezoneOffset());
                return dt;
            });
        }
}]);

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/17/angular-moment-date-time-picker-timezone-directive-issue/
via @lzomedia #developer #freelance #web #lzomedia.com

Getting a Blank space in top of print Screen AnjularJS

I am working in AngularJS to Print invoice Page. Here i’m facing some issue. Getting a Blank space in top of print Screen

enter image description here

Here My Code

HTML

<div id="invoice" class="compact">
    <div class="invoice-container">
        <div class="card md-whiteframe-8dp printclass">
            <div class="header">
                <div class="invoice-date">10 October 2017</div>
                <div layout="row" layout-align="space-between stretch">
                    <div class="client">
                        <div class="invoice-number mb-8" layout="row" layout-align="start center">
                            <span class="title">PERFORMA INVOICE</span>
                            <span class="number">PI50/2017</span>
                        </div>
                        <div class="invoice-number mb-8" layout="row" layout-align="start center">
                            <span class="hsn">HSN CODE:-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="mybutton">
    <button class="print" ng-click="vm.takePrint()">Take Print</button>
</div>

CSS

@media print {
body * { visibility: hidden; }
.printclass * { visibility: visible; }

JS

 vm.takePrint = takePrint;
      function takePrint(){
        window.print();
      }

What i need to do to remover the blank spaces in top the of the print page.enter image description here

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/17/getting-a-blank-space-in-top-of-print-screen-anjularjs/
via @lzomedia #developer #freelance #web #lzomedia.com

I am trying to execute multiple ng-repeat so that I can access a third level array in my json and display in a table but can’t get this working

I am trying to nest ng-repeat but looks like I am not doing it correctly.
I need all the lineItem in the json to be displayed.

Since, json value I am trying to display is a 3rd level array, I tried nested
ng-repeat but does not work.

    <table border="1" width="100%">
  <tr>
    <th>Id</th>
    <th>materialNumber</th>
    <th>quantity</th>
  </tr>
  <tbody ng-repeat="subConfig in values.subConfigs.subConfig">
    <tr ng-repeat="lineItem in subConfig.lineItems.lineItem">
         <td></td>
         <td></td>
          <td></td>
    </tr>
  </tbody>
</table>

here is jsfiddle I tried:

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/17/i-am-trying-to-execute-multiple-ng-repeat-so-that-i-can-access-a-third-level-array-in-my-json-and-display-in-a-table-but-cant-get-this-working/
via @lzomedia #developer #freelance #web #lzomedia.com

Angular ToDo App [on hold]

I am learning Angular, so I am trying to fully develop an Angular ToDo App that enables users to create, update and delete tasks, saving them into a Mongo database.

The app is making progress, the angular logic works in the browser memory but I am having a hard time making it work with my Mongo database. Right now I can insert data into it through the “Create” state, but I can’t figure out how to retrieve the database data in order to display it in the “List” and “Completed” states of the App.

Any experienced help is welcome, if anyone wants to take a look at the Github repository, it is: https://github.com/windsor80/Angular-Personal-Organizer

Thank You!

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/17/angular-todo-app-on-hold/
via @lzomedia #developer #freelance #web #lzomedia.com