I try to use a slider and input of type number at the same time. I create the objects in runtime so I would like to do it just in the DOM.
If I change the value of the slider the input gets the same value but not the other way around.
And also there is not value in the input number in the beginning.
..
*ngFor="let vk of selectedVK"
..
<div class="row">
<div class="col-md-7">
<input
type="range"
ngModel
name="slider"
#slider="ngModel"
min="0"
max="{{vk.max}}"
step="10"
value="{{vk.max/2}}"/>
</div>
<div class="col-md-5">
<input
type="number"
class="form-control"
[value]="slider.value"
max="{{vk.max}}"
min=0>
</div>
<p>{{slider.value}}</p>
</div>
You need to use two-way data binding.
With two-way data binding, when properties in the model get updated, so does the UI. When UI elements get updated, the changes get propagated back to the model.
<input
type="number"
class="form-control"
[(ngModel)]="slider.value"
max="{{vk.max}}"
min=0>
Related
I am dynamically populating the radio button using a json. And using ng-repeat to display it. My issue is that the last radio button gets picked by default which I don't want. I don't see any reason for it to be selected.
<div ng-repeat="bankAccount in availableBankAccounts">
<div class="account-list grey-bottom-border">
<div class="col-sm-6">
<label class="radio col-xs-12 spacer-top-sm option-label">
<input type="radio" name="radio2" ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId" ng-click="selectedReason(bankAccount)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<span class="control-indicator control-indicator-lg hand-cursor"></span>
<span>Account ending in *{{bankAccount.depositAccountNumber|last4Digits}}</span>
</label>
<!-- <p>Account ending in *7890</p> -->
</div>
</div>
</div>
Js file:
$scope.updateDD.bankAccountId=$scope.radio7;
if($scope.availableBankAccounts.length>1)
{
$scope.createJson();
}
Any help indicating what is making last radio button select by default will be helpful.
Try $scope.availableBankAccounts.length>=1
Should work
You are giving the same value to ng-model, where you want to see the selected value and ng-value, which you want to use for value.
Instead of
ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId"
you should do something like
ng-model="updateDD.bankAccountId" ng-value="bankAccount.Id"
I have a select tag in my page that has multiple elements and on selecting an element I show different div blocks. Each div tag contains different input values and I have a save button that saves all the data in each of the div tags. I am looking to validate all the entered data and I know I should be using forms. The problem I have is that some of the forms will be hidden and if they fail validation then the user may not see the errors. What is the best way to handle this?
<select class="item-select" size=10>
<option ng-repeat="item in items track by $index" value="{{$index}}"
ng-selected="$index == selectedItem" ng-click="ac.itemSelected($index)">
{{item.name}}
</option>
<div ng-show="item.name == 'x'">
<input type="number" min="0" max="100" ng-model="item.options.p" step="0.1" />%
</div>
<div ng-show="item.name == 'y'">
<input type="number" min="0" max="100" ng-model="item.options.p" step="0.1" />%
</div>
I have a ng-repeat that loops through an object and displays a list of strings and input fields, example below. I need to set up a real-time verification for these input fields. The input field should be equal to the barcode string. If a user types in a string that IS NOT equal to the barcode string than angular should prompt the user that it must equal the barcode string and clear the input field. Is this possible with angular? I’ve accomplished similar tasks with jQuery.. could I combine some jQuery and Angular to achieve this verification? I'm new with angular.js so any help is greatly appreciated.
HTML:
<div ng-repeat="(index, val) in barcodes.barcodes track by $index">
<div class="form-group row" ng-show="barcodes.barcodes[index]">
<label class="col-sm-3 form-control-label" style="margin-top: 5px"> {{ barcodes.adaptors[$index] }} </label>
<label class="col-sm-3 form-control-label" style="margin-top: 5px"> {{ barcodes.barcodes[index] }} </label>
<div class="col-sm-6">
<input type="email" class="form-control" placeholder="Barcode">
</div>
</div>
</div>
Example bars Object:
var bars = {
"adaptors": ["506-704", "505-703", "503-702", "508-701", "507-705", "502-706", "504-707", "501-708"],
"barcodes": ["11-11-1111","11-11-2222","11-11-3333","11-11-4444","X","X","X","X"];
}
if you want real time...watcher may be what you're looking for. But watcher is not efficient.
What would be best is to use the ng-change directive. This way, every time a user types, it will trigger the function passed to the ng-change directive. This can allow you to handle logic inside a function and react however you want.
https://docs.angularjs.org/api/ng/directive/ngChange
Today I faced a situation with angularJS.
Hi have a recipe website, and to list the ingredients and theyr respective dosage I'm using angular's ng-repeat (here goes the snippet).
<div ng-repeat="food in foodList | filter:query">
<label>
{{food.name}}
</label>
<input type="text" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
</div>
The thing is that when I apply the filter, all inputs I previously inserted some value, if they are hidden because of the filter, they return to empty.
Is there anyway around this?
I think you probably want to bind the input to something using ng-model, for example:
<input type="text" ng-model="food.dosage" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
That will implement two-way binding from your model to the input tag, so that when ng-repeat re-runs, the previously entered values will be re-bound from the model.
I have a slider in one html page, and I want to access the value of the slider in another page.
Here's the slider, in a page called "settings.html":
<div class="widget uib_w_4 no_wrap no_swipe-x with-label d-margins" data-uib="jquery_mobile/slider" data-ver="0" id="sliderAlliteration">
<label class="narrow-control label-top-left" for="sliderAlliteration">Alliteration</label>
<div class="wide-control">
<input type="range" value="10" min="0" max="10" step="1">
</div>
</div>
So the id of the slider is "sliderAlliteration", and I have attempted to access the value of this slider in a javascript script file:
var alliterationLevel = $("#sliderAlliteration").val();
However, alliterationLevel comes up as undefined. How can I access the slider's value?
Change it to
alliterationLevel = $("#sliderAlliteration div input").val();
To get the input value, since #sliderAlliteration is a div and has no value.