Using ng-repeat with objects in AngularJS

In my project, I have a list of objects containing two attributes: label and description. As part of the HTML code, I am iterating through this list using the following code:

<select class="form-control" 
     ng-options="fid.label for fid in myFidList" 
     ng-model="fidSelected" 
     ng-change="setFidDescription()"/>

The goal is to call a function (setFidDescription) to retrieve the object that has been selected in the option tag. This way, I can update the respective description in another division. However, it seems like the ng-model is not updating as expected. Here is the function in question:

 $scope.setFidDescription = function () {
    console.log($scope.fidSelected);
}

When running this code, an empty object is printed to the console. What could be causing this issue? Alternatively, I also considered getting the $index of my selection.

For more information, refer to the following links: JSON + console

Update: I have identified the problem I was facing. Please see the following explanation for further details:

AngularJS ngModel doesn't work inside a ui-bootstrap tabset

This resolved the issue I was encountering.

javascriptangularjs

Answer №1

// Check out this code example

angular
  .module('myApp', [])

.controller('testController', ['$scope',
  function($scope) {

    $scope.myFidList = [{
      label: 'label1',
    }, {
      label: 'label2',
    }]

    $scope.setFidDescription = function() {
      alert($scope.fidSelected.label);
    }

  }
])
<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-controller="testController">

  <select class="form-control" ng-options="fid.label for fid in myFidList" ng-model="fidSelected" ng-change="setFidDescription()"></select>

</body>

</html>

Hope you find this useful.

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

Can the parameter order be customized while working with Angular's $http service?

Within my Angular application, one of the services I am employing uses $http to fetch data from a server. The server endpoint is set up with HMAC authentication and requires the query string parameters to be in a specific order within the URL. When constr ...

angularjsangularjs-http

Incorporate child routes within a React component

I've been attempting to include <route> in a component within a routers component, but it doesn't seem to be working. Can anyone provide some assistance? My login page currently has a form and I'd like to switch that out with routes. ...

javascriptreactjsreact-routerreact-router-dom

What is the best way to handle '<%=>' syntax in grunt?

Many grunt plugins support the following syntax for including files: ['<%= src_dir %>/common/**/*.js', '<%= src_dir %>/app/**/*.js'] or ['<%= test_files.js %>'] Is there a way to utilize a library that ca ...

javascriptnode.jsfileparsinggruntjs

Verify the operation within a pop-up box using ruby watir

Is it possible to confirm a modal dialog window in Internet Explorer using Ruby Watir? Here is the JavaScript code for the modal dialog: jQuery('#yt100').on('click', function(){return confirm('modal dialog window text');}); ...

javascriptjqueryruby-on-railsmodal-dialogwatir

Discover the best way to transfer hook values to CreateContext in React

In my project, I've implemented a component called SideBarBlurChange. Within this component, there is a requirement to pass a value named values inside the BlurChangeValue array, which is nested within the CreateContext. I have searched online for ex ...

javascriptreactjsreact-reduxreact-hooksreact-context

AngularJS directives and controller scope

I'm looking to create a custom directive in AngularJS that generates a div element as a title and a ul list below it. The title should be customizable through an attribute, while the list content is controlled by a designated controller. Check out t ...

javascriptangularjsangularjs-directive

Develop an enhancement for the Date object in Angular 2 using Typescript

Using the built-in Date type, I can easily call date.getDate(), date.getMonth()...etc. However, I am looking for a way to create a custom function like date.myCustomFunctionToGetMonthInString(date) that would return the month in a string format such as &a ...

javascriptdateangulartypescript

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

javascripthtmlangularjsservicecontroller

Assurance that request does not result in any value being returned

I have come across this interesting challenge: function getAPI(token) { return new Promise((resolve, reject) => { console.log("Requesting API"); GM_xmlhttpRequest({ method: "GET", url: "URL"+token, onload: function(respo ...

javascriptpromiserequesttampermonkeygm-xmlhttprequest

Guide to showing the username on the page post-login

My MongoDB database is filled with user information. I'm looking to create a feature on the webpage that displays "Logged in as username here" at the top once users log in. My CSS skills are strong, but when it comes to JavaScript, I'm struggling ...

javascriptnode.jsmongodbexpresshandlebars.js

Exploring the wonders of AngularJS UI Router through HTTP GET requests

Looking for guidance on how to execute an http Get request in Angular using UI router when a template is loaded for my first Angular app. Any help would be appreciated. Thanks! Here is a link to the Plunker I have set up: http://embed.plnkr.co/LRSGXqxjtbY ...

angularjsangular-ui-router

Executing a Java function when a user clicks a button using

I have a situation where I am creating an HTML button using JavaScript and injecting it through Java. The goal is for this button to change activity when clicked. Below is the code snippet: public class WebsiteActivity extends AppCompatActivity implements ...

javascriptjavaandroidandroid-studio

Troubleshooting issues when integrating three.js GLTFLoader() with TypeScript due to conflicts with zimjs

Successfully loading a model using three.js GLTFLoader() with TypeScript in a nuxt.js application: this.mGLTFLoader = new (<any>THREE).GLTFLoader(); this.mGLTFLoader.load(pPath, (gltf) => this.onLoad(gltf), (xhr) => this.onProgress(xhr), (e) = ...

javascripttypescriptthree.jsnuxt.js

The Ajax data was not displayed in the console log, instead an error message was returned stating "http://localhost/IFICSV3/public/sla/sla/getbranch/180 not found"

I am attempting to make a dropdown option dependent on another using ajax. I want to view the data in the console to see if it is successful or not. I expect the data to be displayed in the console log, but instead, an error is being given. http://local ...

javascriptphpajaxlaravel

Inject JSON result into an HTML div after an AJAX request

I have successfully implemented a JavaScript AJAX call that returns JSON data, and now I am trying to display it on my HTML page. Here is the code snippet I am using: success: function(response) { console.log(response); for (var i=0; i < response.len ...

javascriptjsonajax

What is the best way to populate an object with an array's elements using JSON?

I previously inquired about a similar question, but with some variations. You can view it here. Since then, I have altered my approach to tackling the issue. You can find my JSON file here. This is the progress I've made with my javascript: $(docu ...

javascriptjqueryhtmljson

Is there a way in Javascript to save the inner HTML of an element in a cache so that it can be re-rendered after the page is refreshed

Is there a way to cache part of a webpage on the client side using JavaScript/jQuery? Does this method have any limitations in terms of the amount of data that can be cached? How can I access this cache after refreshing the page in order to re-render it? ...

javascriptjqueryhtml

"Troubleshooting the issue of multiple root nodes in Vue.js even when there

While working on my Vue.js code, I encountered an issue with a v-for loop. Despite having only one HTML node within it, Vue is giving me two errors: vue.js:597 [Vue warn]: Error compiling template: <div id="products" v-for="p in productList"> ...

javascripthtmlfor-loopvuejs2

The integration between React.js, Node.js, and Express.js is facing issues with the socket.io functionality

I am currently working on integrating socket.io with React.js, running the socket.io on a backend server using Express.js. One issue I am facing is that when an order is placed on the homepage, it should be displayed in real-time on the Orders page in Rea ...

javascriptnode.jsreactjsexpresssocket.io

Tips for removing alert notifications from Pusher

I have integrated PUSHER into my website for notifications. The codes are successfully added and it is working fine. However, the issue arises when the alert is triggered as I am receiving messages that are not what I expected. The message received from t ...

javascriptphpjsonalertpusher