Angularjs change url parm and refresh onClick Ask Question

I’m displaying a chart with default values when the page is loaded. I’d like to add angularjs clickable links to change the period (month, week, day) displayed on the chart.

I’m currently doing a regular page reload with <a href="{{ URL::to('t') }}?c={{ $currency }}&p=1m">1m</a> but how would it be possible to change the url parm and refreshing the chart without having to reload the page?

html

<div ng-app="app">
<div ng-controller="tickerchartsCtrl">
    <canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-options="options"></canvas>

     <a href="{{ URL::to('t') }}?c={{ $currency }}&p=1m">1m</a> --> Change to angularJs onClick instead of page reload
     <a href="{{ URL::to('t') }}?c={{ $currency }}&p=1w">1w</a> --> Change to angularJs onClick instead of page reload
     <a href="{{ URL::to('t') }}?c={{ $currency }}&p=1d">1d</a> --> Change to angularJs onClick instead of page reload

     <input type="hidden" ng-model="currency" name="period" value="{{ $currency }}">
     <input type="hidden" ng-model="period" name="period" value="{{ $period }}">

</div>
</div>

js

var app = angular.module('tickercharts',['chart.js']);
app.controller('tickerchartsCtrl', ['$scope', '$http', '$location', function($scope, $http, $location){

    $scope.currency      = angular.element(document.getElementsByName('currency')).val();
    $scope.period        = angular.element(document.getElementsByName('period')).val();

    var urlapigettickers = $location.protocol() + "://" + $location.host() + "/api/gettickers?c=" + $scope.currency + "&p=" + $scope.period ;        

    $http.get(urlapigettickers).success(function(data, status, headers, config) {
        $scope.gettickeritems = data.gettickers;

     //console.log(data);
    }).error(function(data, status, headers, config) {
        console.log("No data found..");
  });

}]);

$location changing the path but not picking up .html Ask Question

So I have some code like this:

    if(result.data.authenticated === false) {
        //need to send to unauthoirzed page. 
        $location.path('/unauthorized');
    }

and when it hits I see my url change to:

/#/unauthorized

but it’s not displaying my HTML page that I have defined here:

 .when('/unauthorized', {
                templateUrl:'partials/unauthorized.html',
                controller:'unauthorizedController'
            })

just stays on the original page.

How to import a ms stream video URL link into HTML? Ask Question

I have an angularjs app and a url for a MS Stream video. How can I embed this video into my page? The user should paste this link into the page and embed the video. This is my js code:

  let video = document.createElement("video");
        video.src = videoUrl;
        video.load();
        video.addEventListener('loadeddata', function() {
          scope.myContent._videoConfig = {
            sources: [{
              src: $sce.trustAsResourceUrl(videoUrl),
              type: "video/mp4"
            }]
          };
          scope.$apply();
          scope.myContent.url = videoUrl;
        });

I does not throw an error but I reckon the load() statement does not work.

scope variable changes does not affect the view Ask Question

I am struggling with an AngularJS problem. I have two HTML blocks in a ng-repeat and wants to show one of them on each step.

<div class="col-md-3" style="margin-top:80px" ng-init="checkFunction()">
    <div id="left_group_stage">
            <ul class="list-group" ng-if="started">
                    <li  class="list-group-item"> {{group_leaders[$index]}}</li>
                    <li  class="list-group-item"> {{group_runners[$index+1]}}</li>
            </ul>
            <ul class="list-group" ng-if="!started">
                    <li  class="list-group-item"> {{group_leaders[$index]}}</li>
                    <li  class="list-group-item"> {{group_runners[$index-1]}}</li>
            </ul>
    </div>
</div>

These are my HTML elements.

I am calling checkFunction method each time to change my started value in every step.

And my function in controller is this.

$scope.started=true;
$scope.checkFunction=function(){
    $scope.started = !$scope.started;
    console.log($scope.started);
}

$scope.started value changes with every step I can see it in console but ng-if always takes true value.

I tried $scope.$apply() method for forcing view update in $timeout but that didn’t help too. Everything works normal expect this part.

Working Demo : https://plnkr.co/edit/lVSnbj?p=preview

Error handling for 503 status code through promise in angularjs Ask Question

I want to display some message if the login API call gives 503 status code. Below is my code for that –

function authenticate(user) {
        var req = {
            method: "POST",
            url: baseurl + "login",
            data: data
        };


            return $http(req).then(function(response) {

                    if (response.data.access_token) {
                        setUserInfo(user, response.data.access_token);
                        return response.data;
                    } else {
                        return $q.reject({});
                    }

                }).catch(function(error) {
                    return $q.reject(error);
                });                    

    }`

The problem is that the error object(inside catch block) is showing “-1” for status instead of showing it as “503”, but in the network console of browser, I can see 503 status for the login API call. I am not able to understand, what I am doing wrong here. Please guide me with it.

Different type of function declaration in javascript Ask Question

1)Below is Function declaration with variable name

var x = function (a, b) {return a * b};

2)Below is another type of function in javascript in angular1

  var method = {
            add_category: function(data, success, failure) {
                $upload.upload({
                    url: baseUrl() + 'add_category',
                    data: data
                }).success(success).error(failure);
            },
fileupload: function(data, success, failure) 
            {   

                $upload.upload({
                    url: baseUrl() + 'ImageUpload',
                    data: data
                }).success(success).error(failure);
            }
 return method;
}

What is the difference between on both the code?
first method values assign into one variable like this(var x = function (a, b)) (option 1)
how second code(option 2) will works with semicolon like this(fileupload: function(data, success, failure))?
how data will assign in fileupload variable?

Filter the JSON data based on ID – Angular.js Ask Question

'products': [{  // List of productFieldObjects.
    'name': 'Triblend Android T-Shirt',     
    'item_id': '12345',
    'item_price': '15.00',
    'brand': 'Google',
    'category': 'Apparel',
    'variant': 'Black',
    'quantity': 1, 
    'something' : 'anc',
    'something2' : 'xyz',
    'something3' : 'yyy'                     
   },
   {
    'name': 'Triblend Android T-Shirt',
    'item_id': '12345',
    'item_price': '15.00',
    'brand': 'Google',
    'category': 'Apparel',
    'variant': 'Black',
    'quantity': 1,
    'something' : 'anc',
    'something2' : 'xyz',
    'something3' : 'yyy'
   },
   {
    'name': 'Triblend Android T-Shirt',
    'item_id': '12345',
    'item_price': '15.00',
    'brand': 'Google',
    'category': 'Apparel',
    'variant': 'Black',
    'quantity': 1,
    'something' : 'anc',
    'something2' : 'xyz',
    'something3' : 'yyy'
   }

]

The following data has to be filtered out.

'products': [{
        'name': 'Triblend Android T-Shirt',       
        'id': '12345',
        'price': '45.00',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black'
        'quantity': 3
       }]

Filter the data from the array and return the single array object if it matches with ID. If there are 3 items quantity and price should be added as well

Current Code

var filter = products.filter(function(items){
                    if(items.id == products.id){
                      return items;
                    }
                })

How can I make this please guide thanks a ton in advance

ng click function not working in angularJS controller Ask Question

Here is my code, Actually when I click on function but not showing alert and not getting error in console. So please tell me how to do.

HTML Code

 <li class="has-megamenu" ng-click="homepage()" ><a ><span >Home</span></a>
 </li>

app.js

app.controller('myController', function($scope){
$scope.homepage = function(){
    alert('hi');
}});

view tree like structure in angularjs Ask Question

I have Json in tree like structure , and need to show on view template as tree like structure
here is example

   [
   {
"Software Products": [
  {
    "Programming Languages": [
      "Java API",
      "Python API"
    ]
  },
  {
    "Documentation": [
      "Java Docs",
      "Python Docs",
      {
        "HTTP Docs": [
          "REST Docs",
          "SOAP Docs"
        ]
      }
    ]
  },
  "Try It!"
]
 },
  {
"Cloud Products": [
  "SAAS",
  "PAAS",
  "IAAS"
]
 },
  {
"About Us": [
  {
    "Locations": [
      {
        "India": [
          "Delhi",
          {
            "Mumbai": [
              "Lower Parel",
              "Goregaon"
            ]
          },
          "Bangalore"
        ]
      },
      "USA",
      "Singapore"
    ]
  },
  "Founders",
  "Advisors"
]
 },
"Contact Us"
 ]

This is only of the example ,there is no limit of array of object and keys could be changed, How can i show this data on view template as an tree structure?

Formatting the date based on client OS date format in Angular JS application Ask Question

I have requirement in our application, where we need show the date format as per the client OS date format.I have used the following code to do this.


function getFormatedDateTime(date) {
var dateFormated = moment(date).toDate();
return dateFormated.toLocaleDateString();
};

this working in IE as expected , means when i changed the date format in my PC the date format in the entire application is changing.
But the problem is it not working in other browsers( Chrome, Fire Fox..etc).
we are using moment.js in our application, is there is any option in this to achieve my requirement.
Can any one help me to solve this.
Thanks in Advance