Angular JS - Update Scope value on click

Question

Right now I am passing my parameter through the state like:

        .state('app.listing', {
        url: '/ad/listing/:adId/{type}',
        params: {
          adId: {
            value: "adId",
            squash: false
          }, type: {
            value: null,
            squash: true
          }
        },

This works as I can get "type" from $stateParams and update my get request.

Is there not a way to do this from a click event and not use $stateParams for passing the "type" param?

I basically have a button that filters results and passes the type param from the button. It would be a lot easier if I can just attach a click event to it which then updates my get request.

Just messing around I tried doing something like

  $scope.filter = function(type) {
    if(type) {
      return type;
    }
    return '' ;
  }

    $scope.type = $scope.filter();

Service is like

$http.get(API_ENDPOINT.url + '/listing/' + adId, {
        params: {
          page: page,
          type: type // essentially $scope.type 
        },
      }).

and then on my button I have

 <button ng-click="filter('2')"></button>

^ This will pass 2 for type, but won't reinit the http get call on click. Do I need to broadcast the change is there a simple way to do this?

Does this even make sense? The code above is just mock to give an idea, but open to suggestions if any.

Have you tried $state.go('app.listing', { type: $scope.type })? — Matt Sugden
– Matt Sugden, Commented Jul 27, 2016 at 9:54
@k4l4m Well, its tied into a more complex setup, the http is tied into an init function which then further goes into an infiniteScroll and pagination process. I tried re-initing the init function from the filter function, but that didn't work. — limit
– limit, Commented Jul 27, 2016 at 10:02

Shintu Joseph · Accepted Answer · 2016-07-27 10:16:50Z

1

Angular never requires you to make broadcasts to reflect changes made to scopevariables via the controller

var typeWatcher = '1';
$scope.filter = function(type){

    if (type !== typeWatch)
        {

            $http.get(API_ENDPOINT.url + '/listing/' + adId, {
               params: {
                  page: page,
                  type: type // essentially $scope.type 
              },
           });
           typeWatcher = type;
        }

};

edited Jul 27, 2016 at 10:16

answered Jul 27, 2016 at 9:55

Shintu Joseph

9627 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

limit Over a year ago

Yeah but how to reinit the $http service after the change is where I am stuck. I tried also using $scope.$watch() for change events, but that also didn't work. My current init on load is utilizing infiniteScroll which has all the http calls. I guess I was basically wanting to just have http update based on $scope change.

Shintu Joseph Over a year ago

@limit On ngclick check for the value if the value has changed then call the service

Nishant · Accepted Answer · 2016-07-27 09:54:47Z

0

You can wrap your get call in a function & call it after the filter function in ng-click

$scope.functionName = function () {
  return $http.get(API_ENDPOINT.url + '/listing/' + adId, {
    params: {
      page: page,
      type: type // essentially $scope.type 
    }
  })
}

then in HTML

<button ng-click="filter('2'); functionName()"></button>

answered Jul 27, 2016 at 9:54

Nishant

9147 silver badges18 bronze badges

Comments

Varit J Patel · Accepted Answer · 2016-07-27 09:55:39Z

0

Well, To call $http.get method on click,

$scope.filter = function(type) {
  if(type) {
    //call the method using service.methodName
    return type;
  }
  return '' ;
}

and wrap that $http.get method to one function.

Hope it helps you.

Cheers

answered Jul 27, 2016 at 9:55

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular JS - Update Scope value on click

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related