The functionality of the angular js Controller appears to be malfunctioning

I've created a basic controller to filter an array, but it's throwing an error. When I remove "data-ng-controller" or run it without the controller, everything works fine. I'm having trouble pinpointing where the error is occurring. Please take a look at the code in the following URL -

function SimpleController($scope){
        $scope.names=[
            {name:'abc',address:'xyz'},
            {name:'abcxyz',address:'xxyyzz'},
            {name:'abcmno',address:'mnoap'},
            {name:'aabbcc',address:'ppqqrrr'}
            ];
    }

http://jsfiddle.net/somsekhardash/vL0hzod9/

Answer №1

The Controller was defined inside the onLoad function, causing it to be inaccessible when Angular rendered and parsed the markup. Moving it to the body or a separate script file should resolve this issue.

Check out the revised code snippet in the updated fiddle, which includes the noWrap option: http://jsfiddle.net/yNepRqL7/7/

Answer №2

The code is working perfectly fine.

If you check the jsfiddle on the left-hand side upper corner, you will see an option to select `nowrap in body` below the framework settings. Make sure that this is selected when running the controller function on page load.

See the functioning fiddle here: http://jsfiddle.net/vL0hzod9/1/

function SimpleController($scope){
            $scope.names=[
                {name:'abc',address:'xyz'},
                {name:'abcxyz',address:'xxyyzz'},
                {name:'abcmno',address:'mnoap'},
                {name:'aabbcc',address:'ppqqrrr'}
                ];
        }

No need to modify the code. The only change made was wrapping the controller logic in the body instead of using onload as done previously.

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

What is the most effective method for determining if an object contains a particular property?

Can anyone advise on the best approach to check if an ajax response object has a specific property? I've done some research and it seems there are various methods to do this. One way is: if(ajaxResponse.hasOwnProperty('someProperty')){ ...

Is there a way for me to come back after all child http requests have finished within a parent http request?

I am currently utilizing an API that provides detailed information on kills in a game. The initial endpoint returns an ID for the kill event, followed by a second endpoint to retrieve the names of both the killer and the killed player. Due to the structur ...

What is the best way to convert a recordset to an array using React?

I'm attempting to create an array by retrieving data from a SQL recordset: +------------+------------+------------+ | start_type | field_name | start_text | +------------+------------+------------+ | 0 | Field1 | some text. | +----------- ...

Dealing with intricate query parameters in Express.Js

Currently, I am working on developing REST APIs using Express.js. One particular express route that I have set up is as follows: /api/customer I have incorporated multiple query parameters into this route, such as: /api/customer?name=jake /api/customer?c ...

Can you show me the method to import these ES6 exports? Are they specifically named exports or the default?

As I reviewed the code in the Material UI project, I came across a section that is exporting a variety of React Components: src/Dialog/index.js: export { default } from './Dialog'; export { default as DialogActions } from './DialogActions ...

Could you share the most effective method for implementing a live search feature using javascript or jquery?

While attempting to create a live search for a dataset containing over 10,000 rows, I specified the DOM structure that is available. Despite my efforts to check each result after a single input during the live search process, my browser keeps hanging. Is t ...

Exploring keys rather than values in Vue application

Currently, I am facing an issue where I am retrieving the values for three keys from my API using Axios. However, each time I make a request, the values are being displayed four times for each key. After removing one key from my data models and retesting, ...

Display a block by using the focus() method

My objective is : To display a popin when the user clicks on a button To hide the popin when the user clicks elsewhere I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it However, I wanted to ...

Checking if a phone number begins with a zero using a regular expression

Is there a way to ensure that numbers entered into a field always start with a 0? Initially, I thought the company wanted to mandate entering 0 first, but I believe there might be a more elegant solution. function validateNumber(dataValues, setErrors) ...

Enhance Your Website with Bootstrap 4 Card Image Zoom

Is it possible to add an image zoom effect to Bootstrap 4 cards? I found some inspiration at . Below are the codes I have used: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha ...

Utilizing AJAX for seamless communication between JavaScript and PHP within a modal dialogue box

I'm struggling with learning how to effectively use ajax. In the project I'm currently working on, I have a chart where I can select different people. Once I click on a person's button, their information gets updated in the database. However ...

Creating a single row on the Wordpress options page with a colspan in the first row

On my WordPress options page, I am utilizing the Fluent Framework to create fields. This framework is quite similar to Meta Box, as both make use of the do_settings_fields function to generate code like the following: <table class="form-table"> < ...

Making HTTP requests with axios in Node.js based on multiple conditions

I'm facing an issue with making get calls using axios to both activeURl and inactiveURl. The goal is to handle error messages from the activeUrl call by checking data from the inactiveUrl. However, I keep receiving error messages for the inactiveURL e ...

Is there a way to automatically have all options pre-selected in a multi-select dropdown menu?

I am trying to populate a multi-select dropdown using data from a JSON object. Here is the code snippet for my select dropdown: <select size="2" id="inst_all" style="width:200px;" multiple ng-multiple="true" ng-m ...

How can you properly structure chainable functions in Angular?

Recently, I've been working on developing custom functions for my Angular application. Following the official guidelines, I have created an independent library. My goal is to create chainable functions similar to this: var obj = { test : function( ...

Is there a way to retrieve all IDs within an array of objects using a foreach loop and merge the data associated with each ID?

I am currently working on a TypeScript API where I have merged all the data from this API with some additional data obtained from another API function. I have provided a snippet of my code which adds data to the first index of an array. M ...

Interactive preview of PDFs with pdf.js adaptation

How can I update my PDF preview when resizing the window? Currently, the canvas resizes but the PDF preview remains the same size. I am struggling to find a solution for this. var myState = { pdf: null, currentPage: 1, zoom ...

Manage the dimensions of elements using Javascript on the client side

Here is a form I created: <form action="#" enctype="multipart/form-data" method="post" name="..." id="formPhoto" class="fmp"> <input type="file" name="pho" id="photo" class="inph" accept="image/*"> <button type="submit" id=" ...

The functionality of res.send is not working correctly

Attempting to send a response from my express application to the front-end in order to display an alert. Here is what I have attempted in my app: if (info.messageId) { res.redirect('back'); res.send({ success: true }); } ...

Tips for aligning text to the right with JavaScript

I have a function that contains a few words. I want to display them in a single column with right alignment, each word on a separate line. For instance, 'I will get everything I want' should be displayed as: see image here I will ...