We Keep Coding

Cannot get value of ng-model through $scope

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>

is there any way to bind ng-model to multiple input fields uniquely inside a directive?

In my Project i Got a Issue like.I need to bind the user hobbies in the text field.if the user comes with a single hobby he can directly enter the hobby that he has. but when he had multiple then he had to click add multiple hobbies button.that working fine when i am displaying input fields dynamically using directives.but the issue is the value that coming from ng-model for that input field is binding to all input fields.
Here is my code.
Thanks in advance!
these are the images
this is how i am getting
this is what i need
In HTML
<div>
<div id="showHobbyfield"></div>
<input type="number" class="form-control" placeholder="ADD HOBBIES"
ng-click="addHoby()">
</div>
In controller
$scope.addHoby= function(){
var compiledeHTML = $compile("<div my-hobby></div>")($scope);
$("#showHobbyfield").append(compiledeHTML);
};
$scope.addUser = function(){
$scope.Users= [];
var obj = {
userhobby : $scope.user.morehobies
};
$scope.Users.push(obj);
menuStorage.put($scope.Users);
//menustorage is service to store user in localStorage.
In directive
'use strict';
angular.module('myApp')
.directive('myHobby', function() {
return {
scope : false,
templateUrl: 'views/my-hobby.html'
};
});
this is template: my-hobby.html
<div class="input-group">
<input type="text" ng-model="user.morehobies" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>

For this i would suggest some other way if its ok with you.
If your hobbies is coming in array, like
user.morehobies = ['Reading', 'Writing']
or create array for storing hobbies.
then inside directive you can pass that object in directive.
I will use ng-repeat inside directive.
<div class="input-group" ng-repeat="h in hobies">
<input type="text" ng-model="h" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>
so whenever user clicks on "Add hobbies" then we can add empty string in hobbies object in directive.
and whenever user clicks on remove you can remove that item from array.

To access selected radio button value in angular controller

I am unable to get the value of a selected radio button in angular controller. The reportTypeId I use in angular controller does not fetch the value of the radio button. Can someone guide me where exactly I am wrong ?
HTML
<div class="col-md-3">
<input type="radio" ng-model="reportTypeRadio" value="reportType.reportTypeId">
<a href="#reportTypeEntityList/{{reportType.reportTypeId}}">
{{reportType.reportTypeLabel}}
</a>
</div>
Controller
mdmApp.controller('Controller', function($scope, $http, $location, $routeParams) {
$scope.reportTypeRadio = reportTypeId;
$scope.viewReportTypeEntityList = function() {
$location.path('/reportTypeEntityList/' +reportTypeId);
}
});

You need to use model value from ngModel directive:
$scope.viewReportTypeEntityList = function() {
$location.path('/reportTypeEntityList/' + $scope.reportTypeRadio);
};

It worked. I just made the below changes to my html. used ng-value instead of value, and $parent in ng-model to use the parent scope of the ng-repeat directive.
<div class="col-md-3">
<input type="radio" ng-model="$parent.reportTypeRadio" ng-value="reportType.reportTypeId">
<a href="#reportTypeEntityList/{{reportType.reportTypeId}}">
{{reportType.reportTypeLabel}}
</a>

update radio value in angularjs service

I have a list of radio button values in ControllerA, printed in the view with ng-repeat. The list comes from a service. Now I want to check which radio button is selected in ControllerB.
How do I get the current selected value?
Do I need to add a $watch function in ControllerA and update the service that way?
Or is there a different way of basically binding a variable from a controller to variable in a service?

There's no need to set a $watch; it's all about sharing state between controllers.
Javascript
var app = angular.module('app', []);
app.factory('myState', function() {
// For this example I'm just returning the state directly, but it can also
// be returned from some function or even some backend api. Just remember
// that factories (services/providers) are singletons and will point always
// to the same instance within your app.
return {
chickenEgg: 'egg'
};
});
app.controller('ControllerA', function($scope, myState) {
$scope.formData = myState;
});
app.controller('ControllerB', function($scope, myState) {
$scope.result = myState;
});
Html
<div ng-controller="ControllerA">
<h2>ControllerA</h2>
<form class="form">
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
</label>
</div>
</div>
</form>
</div>
<div ng-controller="ControllerB">
<h2>ControllerB</h2>
<pre><code>result = {{ result | json }}</code></pre>
</div>
You can see it in action in this plunker.

Angular, get dynamic value of textbox to controller

i fetch from json and set the value to my angular ionic app. my textbox holds the value. but im unable to get the textbox value to controller. this is how i have done it
controller.js
$http.post("http://www.fooget.com/mydetails.php).success(function(details){
$scope.mydetails= details;
});
and i set the value to my html page
<form>
<div ng-repeat="data in details|limitTo:1">
<p>{{data.f_name}}</p> <!--displays the value-->
<input type="text" ng-model="v.name" value="{{data.f_name}}"/> <!--empty values-->
<input type="text" ng-model="v.id" value="{{data.id}}"/> <!--empty values-->
<button ng-click="push(v)">
</form>
on form click i dont get the textbox values to my controller, im trying to get the vaules to the controller. it doesnt appear
$scope.push= function (v) {
var push_name = v.name; // empty values
var push_id = v.id; // empty values
}

Also in your HTML:
<div ng-repeat="data in details|limitTo:1">
It should be
<div ng-repeat="data in mydetails|limitTo:1">
as you have $scope.mydetails and not details
The real problem is in initializing the values for ng-model:
As you're just setting the value attribute in input text, it's not assigned to the ng-model. Use ng-init directive to set it in the view.
<input type="text" ng-model="v.name" ng-init="v.name=data.f_name"/>
<input type="text" ng-model="v.id" ng-init="v.name=data.id"/>
This will work for you.