I have on the server side (.NET Razor) a texbox that specified a default radius for a google map zoom that user can modify:
<input type="number" ng-model="radius">
But also for the first load, I should have a server-defined(and managed) variable
<input type="number" ng-model="defaultRadius"
style="display: none;" value="#myDefault">
Here is the code (JS FIDDLE)
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.$watch('defaultRadius', function(newValue) {
$scope.radius = newValue;
}, true);
}
<div ng-controller="MyCtrl">Hello, {{name}}!
<h2>Enter your radius (default {{defaultRadius}}): </h2>
<input type="number" ng-model="radius">
<input type="number" ng-model="defaultRadius"
style="display: none;" value="200">
</div>
However this does not seem to work... How to fix it?
in Angular way you should define the model in the controller, not in the view.
so you need to create a variable in your controller
$scope.defaultRadius = 200';
or there is another trick to do this use : ng-init="defaultRadius=200"
<input type="number" ng-model="defaultRadius" style="display: none;" ng-init="defaultRadius=200" >
Working Fiddle
Related
I am trying to get the value of the ng-model when clicking a button which triggers a function to add each ng-model value to an object. When trying to get the value of $scope.shipNameFirst, it comes up as undefined in the second example.
I've read that it's better to get the value of $scope on the view rather than passing it through the stripeBtn function, so ideally I'd like to do it that way. Hopefully this makes sense.
Can someone explain why this is not working?
Working
HTML
<input type="text" ng-model="shipNameFirst">
<input type="text" ng-model="shipNameLast">
<button type="button" ng-click="stripeBtn(shipNameFirst, shipNameLast)">Checkout with Stripe</button>
Controller
$scope.stripeBtn = function(shipNameFirst, shipNameLast){
$scope.details = {
recNameFirst: shipNameFirst,
recNameLast: shipNameLast,
}
}
Not Working
HTML
<input type="text" ng-model="shipNameFirst">
<input type="text" ng-model="shipNameLast">
<button type="button" ng-click="stripeBtn()">Checkout with Stripe</button>
Controller
$scope.stripeBtn = function(){
console.log($scope.shipNameFirst); //logging this (with $scope) comes up as undefined
$scope.details = {
recNameFirst: $scope.shipNameFirst,
recNameLast: $scope.shipNameLast,
}
}
Thanks!
Check the following code. It's working nicely.
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope){
$scope.stripeBtn = function(){
console.log($scope.shipNameFirst);
$scope.details = {
recNameFirst: $scope.shipNameFirst,
recNameLast: $scope.shipNameLast,
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="shipNameFirst">
<input type="text" ng-model="shipNameLast">
<button type="button" ng-click="stripeBtn()">Checkout with Stripe</button>
</div>
In php usually we are doing name="skills[]" to get data from form as array but how to do this in angularjs?
PHP example:
<input type="text" name="skills[]" />
I want to do the same in AngularJS but getting syntax error.
I am trying like this:
My code:
<input type="text" name="skillname" required data-ng-model="c.skills[].skillname" class="small">
<input type="text" name="skillname" required data-ng-model="c.skills[].skiilname" class="small">
Need help. Thanks.
In angular, data rules your UI, not the other way around. You should have skills array in your controller
app.controller('MainCtrl', function($scope) {
$scope.skills = [
{},
{},
{}
];
});
which you'll feed to ng-repeat or something.
<div ng-repeat='skill in skills'>
<input ng-model='skill.name' />
</div>
This way, adding new textfields on the page is as easy is pushing a new element to the array, $scope.skills.push({}). No need to create DOM elements or anything. This is the angular way.
Demo: http://plnkr.co/edit/Uqldnst3gnF07SJGV6Bn?p=preview
try this:
your controller is:
app.controller('MainCtrl', function($scope) {
$scope.skills = [];
$scope.formData={
skillname:[]
};
});
and your html is:
<div ng-repeat="skill in skills">
<input type="text" required ng-model="formData.skillname[$index]" ng-init="formData.skillname[$index]=skill.skillname" class="small">
</div>
and without ng-repeat you can use this code:
<input type="text" required ng-model="skillname[0]" ng-init="skillname[0]=skills[0].skillname" class="small">
<input type="text" required ng-model="skillname[1]" ng-init="skillname[1]=skills[1].skillname" class="small">
I want to make a Kendo grid with 4 tabstrips, 4 children grids, 5 controllers, first is parent, others are children. Here is a part of code, with one parent and one child controller. Problem is that all the time I got an error "Argument '' is not a function, got undefined" Where should I define it? Everything is stored locally so the preview is not possible
Check this out:
http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-models-between-nested-controllers.html
You don't nest the controllers in your javascript. This is from that link:
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.name = "Peter";
$scope.user = {
name: "Parker"
};
});
app.controller("MyNestedCtrl", function($scope) {
});
Instead, you nest the controllers in your markup. I don't see where you are binding the controllers in your markup, btw.
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Object</label>
<input type="text" ng-model="user.name">
<div class="nested" ng-controller="MyNestedCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Primitive with explicit $parent reference</label>
<input type="text" ng-model="$parent.name">
<label>Object</label>
<input type="text" ng-model="user.name">
</div>
</div>
</body>
This is all from that link I provided.
I try to figure out how I can keep the focus on an input field in angularjs after I click on a button.
My goal is to prevent my mobile to hide his keyboard right after I click on the + button. I want to keep the focus on input choice.
Like this the user can add a new choice without the need to click again on my input.
<div id="demo" ng-app="Foobar">
<div ng-controller="DemoCtrl">
<input type="text" ng-model="title" placeholder="title" />
<input type="text" ng-model="choice" placeholder="choice" />
<button ng-click="addChoice(choice)">+</button>
{{choices}}
</div>
</div>
angular.module('Foobar', [])
.controller('DemoCtrl', ['$scope', function ($scope) {
$scope.choices = [];
$scope.addChoice = function (choice) {
$scope.choices.push(choice);
};
}]);
http://jsfiddle.net/gbg09bto/
What is the best strategy ? (directive, ng-focus)
simplest thing is do it by plain javascript
to do it
in html // put a id attribute
<input type="text" id="choice" ng-model="choice" placeholder="choice" />
in controller function
$scope.addChoice = function (choice) {
$scope.choices.push(choice);
document.getElementById("choice").focus(); // get the element by id & focus the input
};
here is the updated Fiddle
I am building radio buttons dynamically. ng-change='newValue(value) stops being called after each radio button has been pressed once.
this works: Clicking on the radio buttons changes the value to foo/bar/baz.
http://jsfiddle.net/ZPcSe/19/
<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="baz" ng-change='newValue(value)'>
<hr>
{{value}}
</div>
this code does not: The {{value}} - "label" is not updated once each radio button has been pressed at least once. Aparently ng-change is not fired any more.
<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
<input name="asdf" type="radio" ng-model="value" value={{i}} ng-change='newValue(value)'>
</span>
{{value}}
</div>
http://jsfiddle.net/ZPcSe/18/
The Controlles is the same each time:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.value = '-';
$scope.newValue = function(value) {
$scope.value = value;
}
}
Thanks for your help.
ngRepeat creates new scope, so trying to set value sets it on the new scope. The workaround is to reference a property on an object that is on the parent scope--the object lookup happens on the parent scope, and then changing the property works as expected:
HTML:
<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
<input name="asdf" ng-model="options.value" value="{{i}}" type="radio">
</span>
{{options.value}}
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.options = {
value: '-'
};
$scope.newValue = function(value) {
// $scope.options.value = value; // not needed, unless you want to do more work on a change
}
}
You can check out a working fiddle of this workaround. See angular/angular.js#1100 on GitHub for more information.
Just a quick work-around, we can achieve the same- using ng-model="$parent.value", because it would refer to the parent of ng-repeat scope i.e- in myCtrl scope
Only Change in ng-model-
<input name="asdf" type="radio" ng-model="$parent.value" value={{i}} ng-change='newValue(value)'>
Here is the fiddle
Try ng-click instead of ng-change.