Tips for personalizing dual data binding in AngularJS

Here is the HTML code:

<select data-ng-options="o.id as o.device for o in deviceList" data-ng-model="selectedDeviceID"></select>
    <input type="text" id="deviceWidth" ng-model="deviceList[selectedDeviceID].width" placeholder="width"/>

Provided Data:

$scope.deviceList = [{id: 0, device: 'Apple iPhone 5', width:320,height:568},
              {id: 1, device: 'Nokia Lumia 920', width:320,height:533},
              {id: 2, device: 'Samsung Galaxy S III', width:360,height:640}]

Currently, selecting a device from the dropdown displays its width in the textbox. However, I want the displayed value in the textbox to be editable without affecting the original values.

In summary, I aim to have the displayed value in the textbox be editable without changing the stored values.

javascriptangularjsdata-binding

Answer №1

To make the select update the device width textbox, you simply need to add 

ng-change="updateDeviceWidthTextbox()"
to the select element. Then, you should change the model of the input field to something like ng-model="deviceWidthTextbox". Finally, in the controller, you can implement the following function:

$scope.updateDeviceWidthTextbox = function() {
     $scope.deviceWidthTextbox = deviceList[selectedDeviceID].width;
};

Answer №2

Perhaps there was a misunderstanding in our communication. I hope that my assistance was beneficial to you.

<select ng-change="changed(selectedDeviceID)" data-ng-options="o.id as o.device for o in deviceList" data-ng-model="selectedDeviceID"></select>
<input type="text" id="deviceWidth" ng-model="inputText" placeholder="width"/>

Within your controller

$scope.changed = function (selectedDeviceID) {
    $scope.inputText = $scope.deviceList[selectedDeviceID].width
});

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

Experimenting with the inner workings of a method by utilizing vue-test-utils alongside Jest

Is there a way to properly test the internal logic of this method? For instance: async method () { this.isLoading = true; await this.GET_OFFERS(); this.isLoading = false; this.router.push("/somewhere"); } This method toggles isLoading, ...

javascriptunit-testingvue.jsfrontendvue-test-utils

Importing components in real-time to generate static sites

My website has a dynamic page structure with each page having its unique content using various components. During the build process, I am statically pre-rendering the pages using Next.js' static site generation. To manage component population, I have ...

javascriptreactjstypescriptnext.js

Changing an ng-repeat filter following the manual update of a text input

Utilizing jQuery auto-complete to automatically populate values as users type into a text input. <input type="text" ng-model="tags" name="tags" id="tags" value="" /> Subsequently, the ng-repeat is filtering content based on the entered text <di ...

javascriptjqueryangularjsangularjs-ng-repeat

Vue: Changing the value in the select dropdown causes input fields to reset their content

After setting up a form with input values, I noticed that when using a select element with a v-model to change the dropdown value, the input fields from the previous selections are cleared. This has been a persistent issue for me and is now starting to imp ...

javascriptvue.js

Getting data from a xhttp.send() request in a Node.js Express server

On my front page, I have this code snippet: var x = "Hi"; var y = 123; xhttp.open("POST", "/toNodeServer", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send(x, y); Meanwhile, on the server ...

javascriptnode.jsajax

Loading message displayed in web browsers by banner rotation system

I'm currently working on a banner rotator function that seems to be showing a "loading" message continuously while running. Here is the code snippet for reference: var banners = ['../Graphics/adv/1.gif','../Graphics/adv/2.jpg']; / ...

javascripthtmlcssbrowser

Customize Column Headers in Handsontable: A Quick Guide

Is there a way to customize the appearance of column headers in handsontable? I have provided a jsfiddle example to showcase my current progress. While I am able to format the first row of data and change the column titles, I am facing difficulty in forma ...

javascripthandsontable

The dangers posed by vulnerabilities in the React library

Hi there, I just finished setting up react-redux and noticed some vulnerabilities showing up in my console - both low and high. Can anyone explain what this means and if I should consider uninstalling it? ...

javascriptreactjsweb-applicationsreact-redux

Using a local function within Node.js and referencing it with the <%%> tag in a document

I am currently working with Node.js and attempting to utilize a local function within a document that requires the JSON I send in the res.render. Is there a method to achieve this? Below is an example of how I attempted to implement it: <%local_vari ...

javascripthtmlnode.js

Invoking a parent controller method from a directive in AngularJS

I have utilized a tree grid plugin from the following link: https://github.com/khan4019/tree-grid-directive and I made some customizations to its template: .directive('treeGrid', [ '$timeout', function($timeout) { return { ...

javascriptangularjsangularjs-directive

Trim the final digits from the arrays

I have an array that contains various strings: var arr = ['1234','23C','456','356778', '56'] My goal is to filter out array elements that are less than 3 characters or more than 4 characters. The resultin ...

javascriptarraysunderscore.js

Utilizing asynchronous functions to assign a JSON dataset to a variable

Having an issue here! I've created a function to retrieve data from a local JSON file on my server. The problem is that the data is returned asynchronously, so when I try to set it to a variable for later use, it always ends up being undefined. I don& ...

javascriptajaxjsonasynchronous

Increase the size of the grid system column upon clicking on a Bootstrap icon

I am using Google Maps in a tab with Bootstrap, but the map is too small. I would like to change the Bootstrap grid system when I click on a FontAwesome icon: the first column should turn into col-md-8, and the second column should become col-md-4. Here i ...

javascriptjqueryhtmlcssbootstrap-4

Sort data by various categories using Vue.js

I need help filtering my JSON data based on multiple categories using Vuejs, specifically with Vue 3 and collect.js. Here's the template I'm working with: <select v-model="selectedCategory" multiple> <option :value="n ...

javascriptvue.js

Executing a C# method from within a .js file using a Javascript function in a .cs file

I've made some updates based on the responses provided. My main area of confusion lies in the 'data' parameter and how to handle it in the JavaScript call. C# method [HttpPost] public string GetPreviewURL(string activityID) ...

javascriptc#ajax

Can you explain the meaning behind this TypeScript variable declaration syntax?

Can anyone explain the meaning of this code snippet: myCollection: Collection|any = null; I'm having trouble understanding it... Does it indicate that myCollection is set to type Collection, (which is an interface), with a default value of null? But ...

javascriptangulartypescript

Make sure that the click event listener is set up on the anchor element so that it also affects its children

Currently, I have implemented a click event listener on my anchor elements. However, the anchors contain a span element within them, and the event listener does not function properly if you click on the span inside the anchor. document.addEventListene ...

javascriptaddeventlistener

One way to transfer data from a Vue table component to another Vue table component is by including an edit button on each row in the table. This allows

When working with two table components, one fetching records using axios and the other needing to get records after clicking on the edit button in the parent component, I encountered issues. Despite attempting Vue's parent-to-child component communica ...

javascriptlaravelvue.js

Updating the input value of one field by typing into another field is not functioning properly when trying to do so for

I'm managing a website with a form that has three fields which can be duplicated on click. Here is an excerpt of my code: $(document).ready(function() { var max_fields = 10; var wrapper = $(".container1"); var add_button = $("#niy"); var ...

javascripthtmljqueryinput

Transitioning to the Bootstrap library from the jQuery library with the use of several image modals

After coming across this specific question about implementing multiple image modals on a webpage, I noticed that it primarily focused on javascript and jQuery. However, my project involves utilizing the latest version of Bootstrap, so I'm curious if t ...

javascriptjquerybootstrap-5