AngularJS issue: Page content not refreshing

Currently, I am in the process of developing a web application that consists of two main pages - home.html and about.html. The issue I am encountering is that when users click on a specific user in the home.html page, they are redirected to about.html but do not see any information about the selected user. If anyone can take a look at my code and pinpoint where I may have gone wrong, I would greatly appreciate it. Thank you!

Here is an excerpt of my code from home.html:

    <form name="myForm">

<label>Search
<input type="text" size="35" ng-model="userSearch">
</label>

// More HTML content here

Snippet from about.html:

// About.html contents here

Code snippet from app.js:

// JavaScript code from app.js here

Controller section:

// Controller details go here

Section for Services:

// Services information here

Answer №1

As pointed out by others, your code seems to be structured incorrectly! However, I will do my best to assist you.

It appears that LawyerController does not have a method to fetch the data, so let's start from there:

To add a method, update your $routeProvider in app.js like this:

$routeProvider
   .when("/lawyer", {
       controller: "HomeController",
       templateUrl: "partials/home.html"
    })
    .when("/lawyer/:id", {
    controller: "LawyerController",
    templateUrl: "partials/about.html",
    method: 'lawyerInit'
   })
   .otherwise({
       redirectTo: '/lawyer'

   });

Next, modify your LawyerController like so:

app.controller('LawyerController', ['$scope', 'people', '$routeParams',
   function ($scope, people, $routeParams) {

     $scope.lawyerInit = function(){
          people.getUserInfo().then(function (response) {

        $scope.getAll= people.getUserInfo();
        for (var i=0; i<=$scope.getAll.length -1; i++){
              if($scope.getAll[i].lawyers.id==$routeParams.id){
                   $scope.person= $scope.getAll[i];
               }
           }
        console.log($scope.person.lawyers);
    }, function (error) {
        console.log(error)
    });
     }


}]); 

If you encounter an error on the line

if($scope.getAll[i].lawyers.id==$routeParams.id)
, make sure that the id matches exactly with your JSON object structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is React.js susceptible to XSS attacks through href attributes?

When user-generated links in an href tag appear as: javascript:(() => {alert('MALICIOUS CODE running on your browser')})(); This code was injected via an input field on a page that neglects to verify if URLs begin with http / https. Subseque ...

Looking to deactivate the entire keyboard with JavaScript? Make sure that the start key is not disabled, not even Ctrl

Despite my efforts to disable the entire keyboard using JavaScript, I have encountered some limitations. The Windows Start key and Enter key are not being disabled by my script. <script type='text/javascript'> document.onkeydown = functi ...

Is there a similar effect in jQuery? This is achieved using prototype

Simply click on the comments link. Observe how the comments smoothly appear, as if sliding down. Also, try clicking on 'hide' and see what happens. ...

Update not reflecting on global variable across all Phaser states

Whenever you are on the helm state and adjust the warp factor before pressing the engage button, it triggers the function engage which sends out the necessary data. Upon receiving this data, the server checks if the inertial dampeners are active or not, th ...

Issue with React's handleChange function in two separate components

I need assistance with calling the event handleChange from a second Component This is my principal component: const [mainState, setMainState] = useState({ stepValue: 1, saleDateVal: new Date(), customerVal: '' }); function moveNextStep() { ...

I am currently attempting to create a JavaScript function that searches for the <td> elements within an HTML table. However, the function fails to work properly when there are <th></th> tags included

UPDATE: Scratch that, I managed to solve my issue by creating a separate table for the header to contain all of my <th> tags I am working with an HTML table and I would like to add a search bar to filter through the content since it is quite large. ...

The optimal approach for AngularJS services and promises

I have a unique setup in my AngularJS application where I utilize services to make API calls using $http and handle promises in my controllers. Here's an example of my current approach: app.service('Blog', function($http, $q) { var deferr ...

Notifying the chosen option using jQuery

I have been attempting to display an alert on the webpage based on the selected option. Unfortunately, it appears that my code is not functioning properly. This is what I have tried: $(document).ready(function(){ $("select.country").change(functio ...

AngularJS: Enhancing Date Display and Organization

Looking to change the date format from "Mon Oct 12 2015 00:00:00 GMT+0530 (IST)" to "YYYY/MM/DD" within my controller. ...

What is the best way to transform arrays like this into a JSON object?

Below is an array that I need to convert into an object: [ [ '560134275538747403', 39953 ], [ '411510958020624384', 36164 ], [ '468512396948930576', 31762 ], [ '482286641982078977', 29434 ], ...

Creating a cascading select box with two levels in PHP and MySQLExplanation on how to generate a two-tier connected

While I have successfully retrieved values from a MySQL database using a select box in PHP, I am struggling with implementing a two-level chained select box. Does anyone have any sample code or suggestions on how to achieve this? Thank you. ...

Use CSS specifically for codeigniter viewpage

I am unsure if it is possible, but I would like to load CSS and JavaScript within a view page instead of on include.php. Currently, the CSS file is loading on include.php and it is working correctly. What I want to achieve now is to load it directly inside ...

When the previous textbox is filled, the cursor will automatically move to the button

Utilizing an RFID reader where students tap their ID to display basic info, a hidden button on the form opens a modal with various purposes for selection. The challenge is shifting focus of cursor to the button and automatically clicking it when the last ...

Once the init function finishes execution, the $scope variables will be undefined

I implemented an AngularJS function called init in my HTML code as shown below: <div ng-controller="main" ng-init="initpara('<?php echo values;?>', '<?php echo values;?>', '<?php echo values;?>')"> Th ...

Utilizing AngularJS $anchorScroll for navigating to an anchor tag on a different page

On my AngularJS Home Page, I am trying to scroll to an anchor tag on another page. Both pages are loaded as partial html files into the ng-view component based on the URL. When I start the server, the home page loads and then I need to navigate to the FAQ ...

The PDF document appears quite different from the original HTML page it was created from

Is there a way to create a PDF document that mirrors the appearance of a web page using jsPdf? When attempting this, it seems that the font size, text alignment, and table alignment of the resulting PDF do not match that of the original web page. Additiona ...

What is the correct way to run javascript on a DOM element when ng-show is triggered?

For those who prefer shorter explanations, there's a TLDR at the end. Otherwise, here's a detailed breakdown. I have a form that consists of multiple inputs organized into different "pages" using ng-show. What I aim to achieve is when ng-show r ...

Bring your images to life with a captivating 3D hover effect

I am looking to achieve a similar effect using JavaScript instead of just pure CSS like the example provided. I'd prefer not to use SCSS either, just sticking to CSS would be great. Please check out this CodePen for reference. .picture-container ...

What is the proper way to install Vuetify when the webpack.config.js file is missing?

The Vuetify documentation mentions the following: After installation, you need to locate your webpack.config.js file and insert the provided code snippet into the rules array. If you already have a sass rule configured, you may need to make some adjustme ...

Does the Mirage addon work effectively in the ember.js tutorial?

Following the ember.js tutorial, I'm facing a roadblock at this particular stage: (especially when implementing the Mirage add-on). I've made changes to the mirage/config.js file as advised but still unable to display the Mirage data. Despite ...