Tips for extracting an integer from a chosen input value

New to AngularJS and trying to extract an integer from select options. Here is the setup:

<select class="form-control" id="decimation" placeholder="1 or 8" ng-model="data.settings.decimation">
                     <option type="number" value="1" ng-click="deci_bool=0">1</option>
                     <option type="number" value="8" ng-click="deci_bool=1">8</option>
</select>

The goal is to link this input with the option values:

<input ng-if="!deci_bool" type="number"  class="form-control" id="b_mesu" placeholder="Between 0 and {{data.settings.decimation + 96 }}" ng-model="data.settings.b_mesu" min="0" max="97" step="1" ng-click="b_mesu_ctrl" required>

However, it appears that data.settings.decimation + 96 is being treated as a string.

I attempted to solve this issue by following a post on SO where I added the following line in the select tag:

ng-options="values.indexOf(data.settings.decimation) for data.settings.decimation in values"

But this resulted in an error message:

Error: [ngOptions:iexp] Expected expression in form of '_select_ (as _label_)? for (_key_,)?_value_ in _collection_'

Can anyone provide assistance?

javascriptangularjsdrop-down-menu

Answer №1

Give this a shot: 

placeholder="Between 0 and {{ (data.settings.decimation * 1)+78}}"

Check out the JSFiddle example here
Just a heads up, it's weird that 
placeholder="Between 0 and {{ +data.settings.decimation +78}}"
isn't working as expected.

Answer №2

<div ng-controller="exampleCtrl">
            <select class="form-control" id="sampling" placeholder="2 or 10" ng-model="sampling">
                     <option type="number" value="2" ng-click="samp_bool=0">2</option>
                     <option type="number" value="10" ng-click="samp_bool=1">10</option>
</select>

{{sampling}}<br/>

<input type="number" ng-model="n_samples" ng-change="updateSelection()" min="0" max="95" step="1" ng-click="samples_ctrl" required>

        </div>

JS : 

$scope.updateSelection = function(){
        $scope.sampling = ($scope.sampling ? parseInt($scope.sampling) : 0 )+ parseInt($scope.n_samples);
    }

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

Having trouble getting the Google motion chart to work with asynchronous JSON requests

I have been using the code below to make a request for a JSON file and then parsing it. google.load('visualization', '1', {packages: ['controls', "motionchart", "table"]}); google.setOnLoadCallback(function(){ createTable($(& ...

javascriptjsonajaxasynchronousgoogle-visualization

Tips for updating a field using Jquery

For my PHP + MYSQL + JQuery editing form, I am wondering how to display the updated data in the fields without refreshing the entire page after saving it to the database. Currently, I have this code snippet: $(document).ready(function (e) { $('f ...

javascriptjqueryajax

Is combining Nuxt 3 with WP REST API, Pinia, and local storage an effective approach for user authentication?

My current project involves utilizing NUXT 3 for the frontend and integrating Wordpress as the backend. The data is transmitted from the backend to the frontend through the REST API. The application functions as a content management system (CMS), with all ...

javascriptvue.jsmiddlewarenuxtjs3pinia

Determining Visibility in Three.js: A Guide to Checking if an Object is in View of the Camera

Struggling to determine the best method for checking if an Object3d is visible to the camera. Imagine a sphere in the center of the screen with cubes randomly placed on its surface. I need a way to identify which cubes are visible (on the front half of th ...

javascriptthree.js

Troubleshooting issues with Ag-grid integration in Angular using Webpack

I'm having some trouble getting ag-grid to work with webpack. I followed the usual steps of adding ag-grid through npm and referencing it in the webpack.config file like this: resolve: { alias: {"ag-grid" : path.resolve(__dirname, "./node_module ...

angularjsnode.jswebpackag-grid

Issues with Google maps are causing multiple maps to malfunction

After incorporating some jquery code to create multiple maps upon window load, I noticed a peculiar issue with the maps - they all display the same location despite having different latitudes and longitudes set. Upon inspecting the code responsible for cr ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

What factors influence Redux in determining when to update the user interface?

As per the design, when the state updates, the UI should also update accordingly. However, if I return a completely new object, it seems to have no effect on the UI. case 'clearArticleForm': let newState1 = {}; return newState1; } E ...

javascriptreactjsredux

Navigating from the online realm to leisure activities

As a web developer with knowledge in PHP, Python, Ruby, and JavaScript, I've tackled various web projects but now I have a strong desire to dive into game development. It may seem like a big leap, but I'm determined to learn and explore this new ...

phpjavascriptpython

The Jquery one() method is triggering two times upon clicking

My Jquery one() function stops working after the second click instead of the first click. Check out my code snippet below: <div class="box"> <div class="call" data-tai="5">CLICK</div> </div> Here is the corresponding Jquery code ...

javascriptjqueryajax

Encountering a registration error persistently: [TypeError: Network request failed]

Currently, I am in the process of developing an application using React for the frontend and node.js for the backend. However, I have encountered a persistent network error whenever I try to sign up or log in. What puzzles me is that when I test the API en ...

javascriptreactjsnode.jsreact-native

Stop the form submission

Presently, I am dealing with this code snippet: $("#contact-frm-2").bind("jqv.form.result", function(event , errorFound){ if(!errorFound){ alert('go!'); event.preventDefault(); return false; ...

javascriptjqueryjquery-events

Utilizing Angular's Scope Functionality

I am a novice in the world of AngularJS. Currently, I am delving into the expert's codebase and looking to customize the directives for educational purposes. Interestingly, the expert consistently includes: this.scope = $scope; at the start of eac ...

javascriptangularjsangularjs-directiveangularjs-scope

Converting HTML widget code to NEXTjs code for integration in an application (CoinMarketCap Price Marquee Ticker)

Having trouble integrating the CoinMarketCap Price Marquee Ticker Widget into my NEXTjs app. I'm outlining my process and hoping for some suggestions from others who may have attempted this. Template Code: To embed the widget in an HTML page, here is ...

javascriptreactjsnext.jswidgetcoinmarketcap

Organizing search findings in a JavaScript table

What I'm currently doing is using document.write in my application to display search results to the user. However, I want these results to be shown in a table within <div class="main">. The catch is that I don't want the table visible at th ...

javascriptcsshtml

Issues persist with Webpack 4's UglifyJS failing to minify and compress code

My current setup involves webpack 4 and React, and I'm uncertain about whether my code is being compressed and minified properly. The issue arises when using the UglifyJS plugin in webpack's plugin property or the optimization property. When util ...

javascriptreactjswebpackuglifyjs

Exploring the connection between Jquery and Javascript event handling within ASP.NET C# code-behind, utilizing resources such as books and

It seems that Jquery, Javascript, and AJAX are gaining popularity now. I am interested in learning how to use this functionality within C#. Do you have any recommendations for resources or books that teach JavaScript from a C# perspective on the web? Not ...

c#javascriptjqueryasp.net

Enable JavaScript functionality on a button within a form that is not designated as a submit button

I am working on a form with two divs, one visible and the other hidden. The first div contains required input elements in the HTML. When the user fills out the first form and clicks the button, the first div slides up while the second one slides down using ...

javascripthtml

Fetch Timeout Issue in React Native

I am currently using fetch to retrieve data from a server. Unfortunately, I am facing issues with setting a timeout for the fetch request in case the server does not respond. This is my global fetchData class: fetchGetResp(url, token) { return fetch( ...

javascriptreact-nativeecmascript-6fetch

When attempting to add event listeners in a forEach loop in Javascript, only the last entry seems to

I need help with a function that iterates through an Array and adds <h3> elements to a div. The function then attaches an event listener (an onclick) to the current <h3> element, but for some reason, only the last element processed by the fun ...

javascriptasp.netloopsevent-listener

What is the most efficient way to eliminate div elements from the DOM tree individually?

Check out this example. If you click the add button, a user card is added. You can remove all cards by clicking the "Clear" button. But how can you delete individual cards by clicking the "close" icon on each one? Here's the HTML code: <div clas ...

javascriptjqueryajax