Improving efficiency by saving and loading the form value using best practices

One of the challenges I'm facing is how to populate dropdown selections on a webpage without resorting to hard-coded procedures. The code snippet below illustrates the current setup:

<td>
    <ui-select ng-model="user_profile.gender" required="true">
    <ui-select-match > {{$select.selected.name}} </ui-select-match>
    <ui-select-choices repeat="option in selectOptions.gender | propsFilter: {name: $select.search} ">
    <div ng-bind-html="option.name | highlight: $select.search"></div>
    </ui-select-choices>
    </ui-select>
</td>

On the Javascript side.

var selectOptions = {
    gender: [{
        id: 0,
        name: "女"
    }, {
        id: 1,
        name: "男"
    }],
    ..
}

The issue lies in the fact that the database stores the gender value as an INTEGER type, specifically 0 for women and 1 for men. This complicates the process of loading the gender value onto the page without resorting to a cumbersome hard-coding method.

In looking for a more elegant solution, I contemplate methods like:

  • Loading the gender value from an API
  • Setting the selected value of the gender dropdown list accordingly

For saving changes, a similar approach can be taken:

  • Extracting the selected value of the gender dropdown list
  • Sending a PUT request to the API to save the changes

This traditional approach, however, involves a significant amount of logic implementation which may not be ideal. Is there a simpler way to accomplish this task using Angular.js or any other JavaScript library that specializes in handling these types of conversions?

Your insights are appreciated. Thank you.

Answer №1

If you're solely focused on matching the Id value in the repeat of the ui-select, a simple adjustment is all that's needed:

<ui-select-choices repeat="option.id as option in selectOptions.gender | propsFilter: {name: $select.search} ">

By making this change, you are clarifying that the id will be used as the selected value for comparison when an option is selected. This way, the entire object is still available in the repeat, but only the id is set as the selected value.

A quick demonstration can be found at https://plnkr.co/edit/G8FHfauHd2auSYdRUlDB?p=preview

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

Trouble with Angular2: Socket.io event not refreshing the view

I attempted to update my view upon receiving a socket event. This is what my component code looks like: constructor(private _zone: NgZone){ this.socket = io.connect('http://localhost:3000'); this.socket.on('someEvent', function ...

Is there a way to refresh autocomplete/autofill after form submission with a custom JavaScript function?

I've developed a Vue application that includes a form. Once the user clicks on submit, an Ajax request is made using Axios through a JavaScript function. The data being sent is a custom JSON object that I have constructed by combining the information ...

Ways to determine the total amount of days in a given month

As I create a countdown timer, the process involves determining the remaining days in a given month by subtracting the current date from the total number of days in that month. For instance, if there are 30 days in September and 8 days have already passe ...

Delving into the World of ES6 Symbols

Throughout my experience with various programming languages, from C# to Lisp to Scala to Haskell, symbols have consistently behaved as singleton objects. This means that any two symbols with the same name are guaranteed to be identical. In Racket: (equal? ...

Iconic Side Navigation with collapsed button malfunctioning due to negative positioning

I'm facing two issues with my webpage. First: I have three buttons on the right side of my page that are supposed to behave like the buttons on this example. However, when you scroll, you can see that their position is incorrectly displayed "outside" ...

Error with redirect in Ajax request

I have a question regarding an Ajax issue (not using jQuery)... I am trying to extract the URL from a blog that has an RSS feed in XML format. I am attempting to access the link using Ajax, which is working fine most of the time. However, sometimes I enco ...

Exploring the connected component feature in React/Redux

While testing the connected component of my React/Redux app, I encountered an error. The test case that caused the error is: App component › shows account info and debits and credits` Invariant Violation: Could not find "store" in either the context or ...

Learn how to easily alter the background color of a div in real-time by utilizing a color picker or color swatches feature in your

Would it be feasible to dynamically alter the background color of the .hasPicked class? I am interested in adjusting the background color using an input color picker and color swatches. I have already included the necessary code on Codepen. Check it out h ...

Encountered difficulty locating the module path 'stream/promises'

When importing the following in a typescript nodejs app import { pipeline } from "stream/promises"; Visual Studio Code (vscode) / eslint is showing an error message Unable to resolve path to module 'stream/promises' This issue appeare ...

How to quickly send data in AngularJS with only one button press

When I have a textarea and press the "Enter" button, data needs to be sent to the server. However, if I quickly press the "Enter" button several times, the "addNewCommentFactory.addComment" function sends multiple requests. Is there a way to send only one ...

Unable to transfer the component between components

This is the code I have: index.js: import React from "react"; import ReactDOM from "react-dom"; import {dest, People} from './components/people'; import json from './people.json'; function initFromJson() { let names = []; for(let ...

Exploring the Intersection of Windows 8 Store Applications and jQuery: Leveraging MSApp.execUnsafeLocalFunction

Developing a Windows 8 JavaScript Store App (using Cordova) has led to some complications when using jQuery. It seems that in order to utilize certain functions, I have had to modify the jQuery library by adding: MSApp.execUnsafeLocalFunction While this ...

The picture is displayed just once, despite the fact that it was supposed to be returned 50 times within the loop

I'm encountering an issue while trying to use a for loop to render an image in a React component. The loop is not functioning as expected, resulting in the image being displayed only once on the screen even though the intention is to show the same ima ...

Sending POST data to a PHP file without the use of jQuery results in AJAX malfunction

I have been struggling to make an ajax alert layer work with a POST method for the past few days, and I cannot figure out why it is not functioning. I have successfully used the same code structure to send form data through ajax using POST on other admin p ...

Displaying a JQuery loading image on a webpage for a designated amount of time

I am trying to display an image in a div once a price calculation function is called. The image should cover the whole page. Can someone assist me with this? <div class="Progress_Layout" style="display:none"> <div class="Progress_Content"> ...

Converting a string into an array of JSON objects

I am currently attempting to send data to my NodeJS server using the HTTP protocol (vue-resource). The goal is to send an array of JSON objects structured like this : [{"name":"Charlotte","surname":"Chacha","birth":"2000-04-02"},{"name":"Michael","surname ...

Middleware in Express.js designed to alter the response object

One method I'd like to explore is using middleware functions to alter the response. app.use(function(request, response, next) { .. do something .. next(); // moves to next middleware }); When it comes to modifying the request and response ob ...

React JS FormControl not functioning properly to toggle checkbox within a modal window

Upon editing a specific resource, a modal pops up to record the changes and update the application. Extracted from the homepage rfc const [flags,setFlags] = React.useState({}) . . . flags[object1]={flag1: true, flag2:false}; flags[object2]={flag1: true, f ...

Turn off the scroll function while loading a webpage

Here is the script for my preloader: $(window).load(function() { $("#loading").fadeOut(1000); I want to prevent scrolling while the "loading" is still visible, and then enable it again after the fade out completes. ...

Access Rails Data with Angular $resource

Struggling to fetch a group of rails records using angular's $resource, but faced with a challenge when trying to display these records in the view as it appears to be returning an empty array. posts_controller.rb def index @posts = current_user.a ...