Here is my case , I have an array :
var fileParamsArray=['fileThumbanilRetina','fileThumbanilNonRetine','fileThumbanilHdpi' ];
and in my view i have :
<input type="file" name="fileThumbanilRetina" file-model="fileThumbanilRetina" />
<input type="file" name="fileThumbanilNonRetine" file-model="fileThumbanilNonRetine" />
<input type="file" name="fileThumbanilHdpi" file-model="fileThumbanilHdpi" />
in my angularJS controller i want to have something like $scope.fileThumbanilRetina but when try to append array index value to $scope . its not happening
In my controller Here is my function :
$scope.submitForm = function() {
var fileParamsArray = [
'fileThumbanilRetina',
'fileThumbanilNonRetine',
'fileThumbanilHdpi' ];
for(i=0;i<fileParamsArray.length;i++) {
var file = $scope.fileParamsArray[i];
console.log(file);
//call to service function
fileUpload.uploadFileToUrl(file, uploadUrl,fileParamsArray[i]);
}
}
Please Help
If I've understood your 'question' right...you want something like
for(var i ...)
var file = $scope[fileParamsArray[i]];
...
Related
Here is controller code:
$scope.FormData.Quantity = $scope.sum();
Here is HTML Code:
<input type="text" name="FormData.Quantity" ng-model="FormData.Quantity" />
Displaying blank textbox. How to assign?
you have assign function to ng-model , which may not returning anythinmg , try this one...
$scope.FormData = {};
$scope.sum = function(){
return "whatever";
};
$scope.FormData.Quantity = $scope.sum();
I am working with AngularJS and I am trying to pass a value from the Angular into the Controller. This is what my AngularJS Script File looks like:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
{
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = checkTime(m);
s = checkTime(s);
return (h + ":" + m + ":" + s);
t = setTimeout('startTime()', 500);
}
$scope.name = startTime();
}
});
</script>
So from that I am able to get the time through calling $scope.name. But I want to pass that variable into the controller. The way I was thinking of doing it was to pass it in an Html.BeginForm as a parameter but that's not working. This is my BeginForm:
<div ng-app="myApp" ng-controller="myCtrl">
#using (Html.BeginForm("Bob", "Home", new { Time = ng-model="name" },
FormMethod.Post, null))
{
<p>Name:</p> <input style="color:black;" ng-model="name">
<h1 style="color:black;">You entered: {{name}}</h1>
<button type="submit" style="color:black;">Submit</button>
}
</div>
Right now I have the input box there just so I could make sure that it's passing the right value, and it is. But in the BeginForm it's not allowing Time to equal the value being passed from the AngularJS. How would I be able to pass that value to the Controller?
You could pass it as a hidden field:
#using (Html.BeginForm("Bob", "Home", FormMethod.Post))
{
<input name="time" type="hidden" ng-value="name" />
<button type="submit" style="color:black;">Submit</button>
}
I tried to get the HTML page value to angularJS function , The below steps are which i tried.
HTML page :
<label class="item-input item-stacked-label">
<span class="input-label cont_det_label">First Name</span>
<p class="contact_display" id="txtFirstName" ng-model="testName">Satya</p>
</label>
angularJS Page :
.controller('SocialNetworkCtrl', ['$scope','$http','$state','ContactsService','$ionicNavBarDelegate','$ionicLoading','$ionicPopup',function($scope, $http, $state, ContactsService, $ionicNavBarDelegate, $ionicLoading,$ionicPopup) {
$scope.showUserProfile = function() {
$state.go("linkedin");
var firstname = (document.getElementById("txtFirstName").value);
}
}])
So I need var firstname = Satya ?? Is it correct way please guide me to access this value .
var firstName = $scope.testName
<input ng-model="testName" />
testName is the ng-model name that you have give. It will be automatically binded to your controller. No need the get the value using document.getElementById
Wrong usage , why ng-model in <p> tag??
Update
Change your fiddle with the following code, it will work. Also make sure framework is selected properly (as in the image)
<div ng-app ng-controller="testController">
<input ng-model="testDataName" ng-change="check()" /> {{testDataName}}
After ng-change : {{checkName}}
</div>
function testController($scope) {
$scope.testDataName="Dummy Name";
$scope.check = function () {
$scope.checkName=$scope.testDataName;
console.log($scope.checkName);
};
}
its a text node, you will require .innerHTML or '.innerText', .value is for form inputs
var firstname = (document.getElementById("txtFirstName").innerHTML);
and don't use ng-model on a p element, change it to like this
<p class="contact_display" id="txtFirstName">{{testName}}</p>
just use $scope.testName to get the value, no need for firstname = (document.getElementById("txtFirstName").innerHTML); querying DOM for value is jQuery style, use angular the $scope for 2 way bindings
Read more at official doc
Update here is updated function on loginCtrl
.controller('loginCtrl', ['$scope', function ($scope) {
$scope.testNameData = 'Satya';
$scope.doLogin = function() {
alert($scope.testNameData);
};
}])
If you really want to go jQuery way here is what you can do, its not recommended, you should use angular directive to do DOM manipulation
$scope.showUserPro = function() {
$ionicLoading.show();
// Here i need the value of <p tag>
var name = document.getElementById("txtFirstName"),
firstNameFromHtmlPtag = name.innerText;
console.log(firstNameFromHtmlPtag, 'Doing API Call 1');
}
If I have an angular form like this
<form name="myForm">
<input type="text" required ng-model="field1" />
<input type="text" ng-model="field2" />
</form>
When I access the model it will only hold those fields that have values so if both fields have values json will be {"field1":"value1","field2":"value2"}. If only field1 is has a value json will be {"field1":"value1"}. Can I instruct Angular to keep empty fields in the model with null values?
UPDATE:
My controller looks like below. I'm loading the data as json from the server. When the data comes from the server I get this {"field1":"value1","field2":"value2"} but when saveContent is run and only field1 has a value the server gets this {"field1":"value1"}.
var myApp = angular.module('myApp', []);
myApp.controller('contentEditController', ['$scope', '$http',
function ($scope, $http) {
$scope.saveContent = function () {
$http.post("/api/ContentData", $scope.formdata);
};
$scope.loadContent = function (contentId) {
$http.get("/api/ContentData/" + contentId)
.success(function (response) {
$scope.formdata = response;
});
}
}]);
So fields that had values when they came from the server don't get sent back as empty.
-Mathias
Initialize the values on the scope in the controller,
.controller('formcontroller', [ '$scope', function($scope){
$scope.field1 = "";
$scope.field2 = "";
})];
The proper way to do this is to initialize the variables. You should in your controller have
$scope.field1 = ""
$scope.field2 = ""
or a more crude way to do is in to use ng-init (try not to use ng-init if you can)
<input type="text" required ng-model="field1" ng-init="field1=''"/>
<input type="text" ng-model="field2" ng-init="field2=''"/>
I'm creating a single page application and need to be able to display input from one template onto another. The way I have my factory currently set up is not working. Can someone help with this?
Factory:
angular.module('BSG').factory('airplaneFactory', function() {
var name = '';
var last_name = '';
var color = '';
function setData(n, ln, c) {
name = n;
last_name = ln;
color = c;
}
return {
name: name,
last_name: last_name,
color: color,
setData: setData
}
})
Controller:
angular.module('BSG').controller('AirplaneCtrl', ['$scope', 'airplaneFactory', function($scope, airplaneFactory) {
'use strict';
function updateFactory() {
airplaneFactory.setData($scope.name, $scope.last_name, $scope.color);
}
}]);
Snippet from template where input is gathered:
<h2>Who is this story about?</h2>
<p><input type="text" placeholder="name" ng-model="name" ng-change="updateFactory()"></p>
<h2>What is {{ name }}'s last name?</h2>
<p><input type="text" placeholder="last name" ng-model="last_name" ng-change="updateFactory()"></p>
It doesn't work because there is no two-way binding in $scope.name = airplaneFactory.name;. That simply writes the factory property value into a scope variable.
To save data in your factory, you can create a setter function:
angular.module('BSG').factory('airplaneFactory', function() {
var name = '';
var last_name = '';
var color = '';
function setData(n, ln, c) {
name = n;
last_name = ln;
color = c;
}
return {
name: name,
last_name: last_name,
color: color,
setData: setData
}
})
And since the services are singletons, the data will remain the same on different controllers.
So to set the data from a controller, you'd do something like this:
airplaneFactory.setData('John', 'Doe', 'red');
To have the factory updates happen automatically, you should set $watchers on the controller scope properties or use onchange listeners on your input elements. For example:
<h2>Who is this story about?</h2>
<p><input type="text" placeholder="name" ng-model="name" ng-change="updateFactory()"></p>
<h2>What is {{ name }}'s last name?</h2>
<p><input type="text" placeholder="last name" ng-model="last_name" ng-change="updateFactory()"></p>
And then in the controller you'd have the updateFactory function which will call the factory setData method:
function updateFactory() {
airplaneFactory.setData($scope.name, $scope.last_name, $scope.color);
}
UPDATE
Here is a Plunker where everything is working, I've added a button to fetch the latest data from the factory, so you can test it: http://plnkr.co/edit/JQd22tEYSPuJwutCLH1B?p=preview
Don't forget that all ng-* attributes are working with scope properties, so:
function updateFactory() {...
won't be enough, since you need to have a scope property with that name:
$scope.updateFactory = updateFactory;
Or simply define the whole function like I did in the Plunker example:
$scope.updateFactory = function() {... etc
Use rootScope to access name, last_name and color in every view and controller (inject the $rootScoope...