working with angular forms and navigating between routes

Question

working with angular forms and navigating between routes

Currently, my form consists of a basic search field where users enter a parameter and are then redirected to the corresponding page.

I am attempting to pass the argument in the form using Jade syntax:

      form(name='searchForm', ng-href='#/item/{{ctrl.search}}')
        input(type='text', ng-model='ctrl.search')

The goal is to have the route update to #/item/argument once users hit enter after typing in the search field.

Any suggestions on how to accomplish this would be greatly appreciated!

Thank you in advance

javascript angularjs

Answer 1

Answer №1

Check out this demo

Start by creating a dynamic route:

.when('/details/:id',

Your search function should update the location with the specified parameter:

$scope.searchFunction = function() {
  $location.path('details/' + $scope.query);
}

Retrieve the route parameter and make an API call:

$http.get('api/endpoint/' + $routeParams.id)

Answer 2

Check out this demo

Start by creating a dynamic route:

.when('/details/:id',

Your search function should update the location with the specified parameter:

$scope.searchFunction = function() {
  $location.path('details/' + $scope.query);
}

Retrieve the route parameter and make an API call:

$http.get('api/endpoint/' + $routeParams.id)

Answer 3

Answer №2

If I had to make an educated guess, I would suggest setting the action attribute on the form element. This is the traditional way for HTML forms to send data to a specific URL.

Alternatively, you could consider adding a handler to the ng-submit directive on the form itself. Within this handler, you should include something along these lines (don't forget to inject the $location service into your controller):

HTML

form(ng-submit="ctrl.onSubmit($event)")

JS (controller)

this.onSubmit = function (e) {
    e.preventDefault();
    $location.url('item/' + this.search);
}

Answer 4

If I had to make an educated guess, I would suggest setting the action attribute on the form element. This is the traditional way for HTML forms to send data to a specific URL.

Alternatively, you could consider adding a handler to the ng-submit directive on the form itself. Within this handler, you should include something along these lines (don't forget to inject the $location service into your controller):

HTML

form(ng-submit="ctrl.onSubmit($event)")

JS (controller)

this.onSubmit = function (e) {
    e.preventDefault();
    $location.url('item/' + this.search);
}

working with angular forms and navigating between routes

Answer №1

Answer №2

Similar questions

Exploring the concept of returning objects in jQuery

What are some strategies for efficiently locating partial matches in an array without having to loop through each element?

After the initial rendering, JQuery can dynamically search through the DOM elements and seamlessly replace keys with their respective values

The functions .ajaxStart and .ajaxStop seem to be malfunctioning

Simply modifying a custom attribute source using jQuery does not result in it being refreshed

reCAPTCHA 2 triggers an error of 'excessive recursion'

Troubleshooting AngularJS: Directive unable to access controller's variable within scope

How can I prevent jquery/javascript from generating duplicate list items in a jquery mobile listview?

Avoid the need for users to manually input dates in the Custom Date Picker

Controller is not being triggered by Ajax method when there is a decimal value

How to use multiple template urls in Angular 6

Ways to retrieve the path of a button found within table cells

What is the process for finding GitHub users with a specific string in their name by utilizing the GitHub API

What is the best method to update the content of a bootstrap-5 popover using only pure JavaScript?

Instructions for downloading a .zip file sent through a HTTP response (using an axios PUT request)

Changing the format of a numerical value to include commas for every 1000 increment

Desktop users will not see the mobile navigation bar

Unlock the Power of TWBS Ratchet: Manually Closing Modal Windows

No entries found in the Nuxt/content module's array

Looking for a way to conduct a recursive search in a Javascript object that fits your specific requirements?