<div ng-app ng-controller="MyCtrl">
<select ng-model="referral.organization" ng-options="b for b in organizations"></select>
</div>
<script type='text/javascript'>
function MyCtrl($scope) {
$scope.organizations = ['Moo Milk','Silver Dairy'];
$scope.referral = {
organization: $scope.organizations[0]
};
}
</script>
<input name="job_description" onkeypress="return event.keyCode != 13;" ng-model="req_data.job_description" value="{{referral}}" placeholder="Quantity" type="text" />
This is my code I just want to pass option value into input ng-model.
If I'm understanding correctly you want what's selected in the dropdown list above to be populated in the input field below?
<div ng-app ng-controller="MyCtrl">
<select ng-model="referral.organization" ng-options="b for b in organizations"></select>
<input name="job_description" onkeypress="return event.keyCode != 13;" ng-model="req_data.job_description" ng-value="referral.organization[0]" placeholder="Quantity" type="text" />
</div>
<script type='text/javascript'>
function MyCtrl($scope) {
$scope.organizations = ['Moo Milk','Silver Dairy'];
$scope.referral = {
organization: $scope.organizations[0]
};
}
</script>
Try this, be sure to put both select and input into the same controller as I have above.
Related
I have 2 input text and button.. I want to make exchange value between 2 inputs at the same time. here is my code.
$("button").on('click', function() {
if (!($(this).hasClass("clicked"))) {
$(this).addClass("clicked");
$(".first").val($(".second").val());
$(".second").val($(".first").val());
} else {
$(this).removeClass("clicked");
$(".first").val($(".second").val());
$(".second").val($(".first").val());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>
the first input works fine but the second not working.. I want the exchange happen at the same time.
You are overwriting one of the two before reading that other value. So you end up with twice the same value.
The traditional way is to use a temporary variable:
$("button").on('click', function() {
$(this).toggleClass("clicked");
var temp = $(".first").val();
$(".first").val($(".second").val());
$(".second").val(temp);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>
At the same time note how you can shorten your code with the toggleClass method.
Alternative
Just to provide an alternative, you can do this without an explicit extra variable, using the ES6 destructuring assignment. For that to work, you need to have an assignable property for the input value. Of course, the DOM value property would just be that:
$("button").on('click', function() {
$(this).toggleClass("clicked");
[$(".first").get(0).value, $(".second").get(0).value] =
[$(".second").val(), $(".first").val()];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>
$("button").on('click', function() {
var firstVal = $(".first").val()
var secondVal = $(".second").val()
if (!($(this).hasClass("clicked"))) {
$(this).addClass("clicked");
$(".first").val(secondVal);
$(".second").val(firstVal);
} else {
$(this).removeClass("clicked");
$(".first").val(secondVal);
$(".second").val(firstVal);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>
You need to store the original values first, when you try to swap them without storing you forget that one of the values is overridden.
that because the value was changed . try to save old value on var
$("button").on('click', function() {
var first = $(".first").val(),
second = $(".second").val();
if (!($(this).hasClass("clicked"))) {
$(this).addClass("clicked");
$(".first").val(second);
$(".second").val(first);
} else {
$(this).removeClass("clicked");
$(".first").val(second);
$(".second").val(first);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="first" type="text" value>
<input class="second" type="text" value>
<button type="button">Exchange</button>
</div>
Use an intermediate temp variable to swap them.
$("button").on('click', function() {
if (!($(this).hasClass("clicked"))) {
$(this).addClass("clicked");
var temp = $(".first").val();
$(".first").val($(".second").val());
$(".second").val(temp);
} else {
$(this).removeClass("clicked");
var temp = $(".first").val();
$(".first").val($(".second").val());
$(".second").val(temp);
}
});
Working DEMO
I tried to make a warning if the input is not the same , like the example below:
$data = document.getElementById("target").value = "";
$("#target").keyup(function() {
if ($data.length > 3) {
$("#target").css("border-color", "red");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="target" class="form-control" type="text" value="">
</form>
But it did not work, so if true then the border-color has to change
You need to move your $data variable into inside keyup events. Since you've add jQuery tag, I've selecting object using jQuery method too.
UPDATE
Simplify the code
$("#target").keyup(function(){
var $data = $("#target").val();
$("#target" ).css("border-color", $data.length > 3 ? "red" : "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="target" class="form-control" type="text" value="">
</form>
In provided example, $data holds ""(empty string)
In event-handler-function, this refers to the element on which event is invoked hence this.value will return the value of the element.
var $data = $("#target");
$data.val('');
$data.keyup(function() {
if (this.value.length > 3) {
$("#target").css("border-color", "red");
} else {
$("#target").css("border-color", "");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="target" class="form-control" type="text" value="">
</form>
Another approach I would like to suggest is to using jQuery.toggleClass instead of jQuery.css
var $data = $("#target");
$data.keyup(function() {
$("#target").toggleClass('error', this.value.length > 3);
});
.error {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="target" class="form-control" type="text" value="">
</form>
I have an input text field as :
<input type="text" class="form-control" id="inputValue" name="uservalue" ng-model="inputNumber" ng-required="true" autofocus="true" ng-blur="checkIfValid()"/>
My controller has the ng-blur function as follows:
$scope.checkIfValid = function(){
console.log("Value is = " + $scope.inputNumber);
}
I have defined - $scope.inputNumber = '';
My console.log shows an empty value even though I input a value in the text field and hit 'Tab' or move on to the next field to invoke the ng-blur function.
What am I doing wrong here?
`
Check this
var app = angular.module("myapp", []);
app.controller("myCtrl", ['$scope', function($scope) {
$scope.inputNumber="new";
$scope.checkIfValid = function(){
console.log("Value is = " + $scope.inputNumber);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="myCtrl">
<input type="text" class="form-control" id="inputValue" name="uservalue" ng-model="inputNumber" ng-required="true" autofocus="true" ng-blur="checkIfValid()"/>
<h1>{{inputNumber}}</h1>
</div>
</div>
I am new to Angular, please help me. I have two input fields, one with area code and other with the number.
// First input field for area code
<input area-input type="tel" required="true" name="area"
ng-model="employee.home.area"></input>
// Second input field for number
<input phone-input type="tel" required="true"
name="number" ng-model="employee.home.number"></input>
I want to combine them into one like area code + number.
Thanks in advance. Any suggestions or help would be appreciated.
You can write custom directive, and use parsers and formatters from ngModelControllers
So you can get something like this:
angular.module('app', []).
controller('ctrl', function($scope,$timeout) {
$scope.employee = {home : {area:'area', number:'number'}};
})
.directive('phone', function() {
function formatPhone(value) {
console.log('format',value);
if (!value) return;
if (!value.number) return value.area;
value.area = value.area||'';
return value.area + "-" + value.number;
}
return {
require: 'ngModel',
scope:{
ngModel:'='
},
link: function(scope, element, attrs, ngModel) {
scope.$watch(function(){return scope.ngModel;},function(n){
if(!n) scope.ngModel={area:"",number:""}
console.log('watch',n);
ngModel.$viewValue= formatPhone(n);
ngModel.$render();
},true);
ngModel.$formatters.push(formatPhone);
ngModel.$parsers.push(function(value) {
console.log(value, value.split('-'));
var parts = value.split('-');
return {
area: parts[0],
number: parts[1]||''
};
});
}
};
})
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<h1>Hello Plunker!</h1>
// First input field for area code<br/>
<input area-input="" type="tel" required="true" name="area" ng-model="employee.home.area" />
<br/>// Second input field for number<br/>
<input phone-input="" type="tel" required="true" name="number" ng-model="employee.home.number" />
<br/><br/>
//custom field. format: area-number<br/>
<input data-phone type="tel" required="true" ng-model="employee.home" />
{{employee}}
</div>
You can use {{employee.home.area}}+{{employee.home.number}} in your html on
use `employee.home.area+employee.home.number` in your `controller`
Hope this helps
Hello everyone i have faced some problem in case of nested checkbox uses. In my problem i m stuck on to how to use IncludeAll on click checkbox. If checkbox value is true then it's give me a value of that. if IncludeAll checkbox is true then all checkbox will be selected and show the value of all in Array. and if one of the checkbox is false then IncludeAll checkbox false..But in Case the other checkbox will be selected.
This is my Fiddle Link : http://jsfiddle.net/0x4396pu/1/
Here is my Html Code:
<form action="#" ng-controller='MyCtrl'>
<div class="control-group" ng-repeat="story in stories">
<br>
<input type="checkbox" ng-model="story.selectionAll">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-checked="story.selectionAll">
{{browser}}
</label>
</div>
</div>
</div>
<pre>{{selection | json }}</pre>
</form>
Here is my Controller file :
function MyCtrl($scope) {
$scope.stories = ['1', '2', '3'];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
angular.forEach($scope.stories, function(story) {
$scope.selection[story] = {
browsers: {},
};
});
}
Thanks in Advance.
I am answer my own Question. But anyway Here is Answer how to select Checkbox in Nested ng-repeat.i think It's Help you Thanks.
Http Plunkr LInk http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview
Here is Html Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4
/angular.min.js">
</script>
<script src="script.js"></script>
</head>
<body>
<form action="#" ng-controller='detailContrller'>
<div class="control-group" ng-repeat="story in stories"> <br>
<h4> Enter Data </h4>
Name : <input type="text" data-ng-model="selection[story].Name1"
placeholder="Enter Name"> <br>
Address : <input type="text" data-ng-model="selection[story].Name2"
placeholder="Enter Address"> <br>
City : <input type="text" data-ng-model="selection[story].Name3"
placeholder="Enter City"> <br>
Phone : <input type="text" data-ng-model="selection[story].Name4"
placeholder="Enter Phone "> <br>
State : <input type="text" data-ng-model="selection[story].Name5"
placeholder="Enter State"> <br>
<input type="checkbox" ng-model="selection[story].all"
ng-change="updateAll(story)">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-change="checkChange(browser)"
> {{browser}}
</label>
</div>
</div>
<button type="button" data-ng-click="save()">Save</button>
<pre>{{selection | json}}</pre>
</form>
</body>
</html>
Here is my Controller
var app = angular.module("myApp",[]);
app.controller('detailContrller', function($scope){
$scope.stories = [];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
$scope.details = {};
var checked;
$scope.updateAll = function (story) {
checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
for(var i = 0; i< 3; i++) {
$scope.stories.push(i+1);
}
$scope.checkChange = function (browser) {
for(var i =0; i< $scope.stories.length; i++){
if(!$scope.stories[i].selected){
checked = false
return false;
}
}
}
angular.forEach($scope.stories, function(storgy) {
$scope.selection[storgy] = {
browsers: {}
};
});
$scope.save = function () {
console.log($scope.selection);
}
})
Your "include all" checkbox is trying to set .selectionAll property on a String (story in stories gives you a String).
You can't use ng-checked to somehow "work together" with ng-model. If you want your "include all" checkbox to select all subordinate checkboxes and vice versa, you'll need to watch the changes and provide some logic connecting the two things in your controller.
For example, if you want change of the "include all" checkbox value to influence other checkboxes, you'd have to do something like
<input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)">
and in your controller
$scope.updateAll = function (story) {
var checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
and handle changes of the individual checkboxes in a similar fashion.