I have this fiddle (which won't work, I don't know why. Will be glad if someone would help to fix it). The code in the fiddle is:
HTML:
<body ng-app="testApp">
<div ng-controller="AppCtrl">
<span>kid name is {{kids[0].name}}</span><br />
<input type="text" ng-model="kids[0].name" value={{kids[0].name}} > <br />
<span>kid age is {{kids[0].age}}</span> <br />
<input type="range" value={{kids[0].age}} >
<div ng-repeat="kid in kids">
<br />
The kid's name is <strong id="name">{{kid.name}}</strong> and his age is {{kid.age}}
<br />
<input type="range" value={{kid.age}} >
</div>
</div>
</body>
JS:
var testApp = angular.module('testApp', []);
testApp.controller('AppCtrl', function ($scope, $http)
{
$scope.kids = [{"name": "Din", "age": 11}, {"name": "Dina", "age": 17}];
});
The problem is that the range (age) input is not binded to the the span above it ("kid age is {{kid.age}}").
Why there is no binding?
Your fiddle was configured incorrectly. You should select "No wrap in " below the AngularJs version.
Here is the updated fiddle.
In addition to the change in setting, you also need to add ng-model to the range input like #nubinub suggested.
<input type="range" ng-model="kid.age" value="{{kid.age}}">
Change the onLoad to No Wrap in JSFiddle
Also use ng-model in input field for binding with the angularjs
change
<input type="range" value={{kid.age}} >
to
Take a look at this
Working Demo
<body ng-app="testApp">
<div ng-controller="AppCtrl">
<span>kid name is {{kids[0].name}}</span><br />
<input type="text" ng-model="kids[0].name" value={{kids[0].name}} > <br />
<span>kid age is {{kids[0].age}}</span> <br />
<input type="text" value={{kids[0].age}} >
<div ng-repeat="kid in kids">
<br />
The kid's name is <strong id="name">{{kid.name}}</strong> and his age is {{kid.age}}
<br />
<input type="range" ng-model="kid.age" value="{{kid.age}}">
</div>
</div>
Related
I am currently trying to figure out how to keep reference to individual dynamically added input fields. I have a modal popup as follows:
<div ng-controller="SamplesQueryController">
<button ng-click="toggleModal()" class="btn-splash-small">Add Sample</button>
<modal title="Create New Sample" visible="showModal">
<form role="form">
Sample Name:<br>
<input type="text" ng-model="newSampleName.sampleName">
<br> Attribute 1 Name:<br>
<input type="text" ng-model="newAtt1Name.att1Name">
<br> Attribute 1 Value: <br>
<input type="text" ng-model="newAtt1Value.att1Value"> <br>
<button id="submitSample" ng-click="createSample();toggleModal()">Submit
Sample</button>
<button id="addAttribute">Add Attribute</button>
<button ng-click="toggleModal()">Close</button>
</form>
</modal>
</div>
which currently has an input field for att1Name and att1Value, I have an addAttribute button which should add 2 new input fields (for att2Name and att2Value). I can dynamically create the inputs using a method such as:
<input type="text" ng-repeat="myinput in myinputs" ng-model="myinput">
</input>
but how can I keep reference to each of the typed in values in the input fields and how can I create 2 fields for each element in myinputs
Preferably, I would be storing these values in some sort of structure like attributes.att1.name, attributes.att1.value, attributes.att8.name, etc
You'll want to have your model as an Array that contains Objects, which has the property 'name' and 'value' initiated.
Then it's pretty easy to create a ng-repeat div, that contains 2 text input fields:
<div ng-repeat="input in inputs">
<input type="text" ng-model="input.l">
<input type="text" ng-model="input.v">
</div>
Then you can subsequently add the fields by pushing newly initiated object to the $scope.inputs.
function add() {
var obj = {attr1Name: '', attr1Value: ''};
$scope.inputs.push(obj);
}
Working fiddle here: https://jsfiddle.net/ccvLhmps/
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h2>Cost Calculator</h2>
<p></p>
<p></p>
<p></p>
<div ng-app>
<input name="amount" ng-model="a" placeholder="Amount" />
<input name="adjustment" ng-model="b" placeholder="Adjustment" />
<input name="advance" ng-model="c" placeholder="Total" value='{{ a-b}}' />
<input name="balance" placeholder="Total" readonly required value='{{ a-b-c}}' />
</div>
</body>
</html>
I have a very large model that I am creating a form for using AngularJS. It's nested over 4 levels deep and the names of the fields on the model are very long. I end up with markup like this.
<input type="text" ng-model="something_super_long.another_very_long_thing.hey_lets_add_another.ok_one_more._last_one_seriously"></input>
This is pretty annoying. I wish that I could set up some kind of nested inheritance to avoid setting super long ng-model names over and over. Here is a fully fleshed out EXAMPLE of what I am talking about. I made the model a REASONABLE level of depth only 3 levels of not so long names.
Instead of doing this.
<div ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_1" />
<input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_2" />
<input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_3" />
</div>
</div>
I want to do something more like this:
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-model="building_in_san_francisco">
<div ng-model="layout_floor_1">
<input type="text" ng-model="room_1" />
<input type="text" ng-model="room_2" />
<input type="text" ng-model="room_3" />
</div>
</div>
</div>
</div>
Does anyone know if anything like this is possible?
You could use ng-init in the templates and nest scopes. This keeps your controller clean and uses the child scopes only in the template:
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-scope ng-init="building = buildings.building_in_san_francisco">
<div ng-scope ng-init="floor = building.layout_floor_1">
<input type="text" ng-model="floor.room_1" />
<input type="text" ng-model="floor.room_2" />
<input type="text" ng-model="floor.room_3" />
</div>
</div>
</div>
</div>
JS
angular.module('myApp', [])
.controller('myController', function mainCtrl($scope) {
$scope.buildings = {
building_in_san_francisco: {
layout_floor_1: {
room_1: '1',
room_2: '2',
room_3: '3'
}
}
};
});
You can try this in your controller:
$scope.something=building_in_san_francisco.layout_floor_1;
And when you call it
<input type="text" ng-model="something.room_1" />
i have data like this :
$scope.list = {
0:{'type':'text','required':true},
1:{'type':'text','required':false},
2:{'type':'text','required':true}
};
i'm using ng-repeat to create form
<div ng-repeat="l in list">
<input type="{{l.type}}" />
</div>
how I want to get the attributes "required" if the value of "l.required" is true
like this :
<div>
<input type="text" required />
</div>
<div>
<input type="text" />
</div>
<div>
<input type="text" required />
</div>
how I do that
Try:
<div ng-repeat="(k, l) in list">
<input type="{{l.type}}" ng-required="l.required" />
</div>
since it is an object that you are iterating through you would need to use the value of the iteration i.e (k, l) in list and use ng-required to set the required flag.
The simplest version of my question is this: I have a few spans:
<span id="one">SpanOne</span>
<span id="two">SpanTwo</span>
<span id="three">SpanThree</span>
and a text field:
<input type="text" id="textField"/>
I want to click on one of the spans, and have the text field populated with its text. I can do something like adding 'onClick="document.all.textField.value=this.text"' to the span elements, but how can I do it using AngularJS?
Assuming your AngularJS enviornment is setup properly, the simplest way:
<span id="one" ng-click="myVar = 'SpanOne'">SpanOne</span>
<span id="two" ng-click="myVar = 'SpanTwo'">SpanTwo</span>
<span id="three" ng-click="myVar = 'SpanThree'">SpanThree</span>
<input type="text" id="textField" ng-model="myVar" />
#KayakDave has the best overall solution, in my opinion:
HTML:
<span id="one" ng-click="updateVar($event)">SpanOne</span>
<span id="two" ng-click="updateVar($event)">SpanTwo</span>
<span id="three" ng-click="updateVar($event)">SpanThree</span>
<input type="text" id="textField" ng-model="myVar" />
Your controller:
yourApp.controller('yourController', function ($scope) {
$scope.updateVar = function (event) {
$scope.myVar = angular.element(event.target).text();
};
});
By doing it this way, if you change the text within the span than you wouldn't have to change anything in the ng-click.
You should ask KayakDave to post an answer, which he is is more than welcome to copy my demonstration of his suggestion, and than accept that.
I prefer put the logic inside the controller
In your html:
<span id="one" ng-click="updateVar('SpanOne')">SpanOne</span>
<span id="two" ng-click="updateVar('SpanTwo')">SpanTwo</span>
<span id="three" ng-click="updateVar('SpanThree')">SpanThree</span>
<input type="text" id="textField" ng-model="myVar" />
In your controller:
/*...*/
$scope.updateVar = function(value) {
$scope.myVar = value;
}
The other examples are too complicated, if they even work. You just create a variable, and display it in the span.
Example: http://jsfiddle.net/XPLpP/1/
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="text" />
<span> {{text }} </span>
</div>
CODE:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.text = "initial value";
});
Here is a simple solution:
<div data-ng-app>
<input type="text" id="textField" ng-model="text"/>
<span ng-click="text = 'SpanOne'">SpanOne</span>
<span ng-click="text = 'SpanTwo'">SpanTwo</span>
<span ng-click="text = 'SpanThree'">SpanThree</span>
</div>
And the fiddle:
http://jsfiddle.net/jeremylikness/G74wB/
If you want to bind to something on scope it would look like:
<span ng-click="text = variable">{{variable}}</span>
How to update with jquery the label of preview div when im typing inside of the parent input of edit div?
Thank you.
<html>
<body>
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyName" />
</div>
</body>
</html>
You'd have to have something along these lines in your code:
<script>
$("#companyName").keyup(function () {
var value = $(this).val();
$(".workExperience").text(value);
}).keyup();
</script>
However, I would NOT give them the same id value, as it might lead to some errors.
Good luck!
you can not have the same ID in the tag "label" and the tag "input".
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyNameInput" />
</div>
$(document).ready(function(e){
$('#companyNameInput').bind('change', function(ev) {
$(this).closest('#edit').prev().find('#companyName').html($(this).val());
});
});
test