We Keep Coding

AngularJS Form and $scope not updating each other

I am trying to make a very minimalistic form in AngularJS (version 1).
I am trying to use ng-model and the $scope to update an object I've named fluff. Once a user clicks submit it should be used in this $http call.
I'm highly confused I thought ng-model would bind this to the object in the scope. But it always returns a blank cause the $scope.fluff is not updating.
Yet if I inject {{ fluff.link }} this will update based on the textbox.
Here is my form in the view:
<form name="fluffForm" ng-submit="submitform()">
<span>Link: <input type="text" name="link" ng-model="form.link"></span>
<span>Description: <input type="text" name="description" ng-model="form.desc"></span>
<button type="submit">submit</button>
</form>
</div>
Here is my controller:
(function(){
'use strict';
angular.module('fluff').controller('FormController', FormController);
FormController.$inject = ['$scope', '$rootScope', '$routeParams', '$window', '$http'];
function FormController( $scope, $rootScope, $routeParams, $window, $http){
var form = this;
$scope.fluff = {}; // form data in json object(?) to be posted to mongo database
$scope.submitform = function(){
$scope.fluff.link = form.link;
$scope.fluff.description = form.desc;
console.log('form-data', $scope.fluff);
$http({
method: 'POST',
url: 'http://fluff.link/share',
data: $scope.fluff,
headers: {'Content-type': 'application/x-www-form-urlenconded'}
}).success(function(data){
console.log('Call to API was successful');
if(data.errors){
console.log('Data Errors');
console.log('error:', $data.errors.name);
//show errors - part of the response in the REST API have to make this portion up myself
$scope.errorName = $data.errors.name;
} else {
console.log('returned share id', data);
var fluff = 'fluff/link/'+ data;
$window.location.href = fluff;
}
});
}
}
})();
Here is my route:
(function(){
'use strict';
angular.module('fluff').config(Config);
Config.$inject = ['$routeProvider'];
function Config($routeProvider){
$routeProvider.when('/', {
templateUrl: 'views/index.client.view.html',
controller: 'FormController',
controllerAs: 'form'
});
}
})();
Added some logs from the developer console in chrome:
in submitform FormController {link: "test", desc: "test"}
fluff.form.controller.js:24 form-data Object {link: undefined}
Got it to work! Will update with my answer when it allows!

So my problem here is that I wasn't using the form controller like I should have.
Here I have the template being loaded with the controller as form.
$routeProvider.when('/', {
templateUrl: 'views/index.client.view.html',
controller: 'FormController',
controllerAs: 'form'
});
In the template I have to use form:
<span>Link: <input type="text" name="link" ng-model="form.link"></span>
<span>Description: <input type="text" name="description" ng-model="form.desc"></span>
then in the controller I create a this object:
var vm = this;
vm is now linked to form.
So now I can do this:
var fluff = {};
fluff.link = form.link;
fluff.description = form.desc;
Now fluff has all the data it needs when my user clicks submit.

Pass data from angular form to another controller

I am new to angularjs. I want to pass data from html form to another route.
Here is the part of index.html
<div ng-app="myApp" ng-controller="HomeController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div ng-view=""></div>
</div>
</div>
</div>
</div>
Here are the routes
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$routeProvider.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutController'
});
}]);
When the route is / it hits the views/home.html in which it has a form
<form action="#/about" ng-submit="submitData()">
<input type="text" name="address" ng-model="user.address" />
<input type="submit" />
</form>
I have a user service whose implementation is
myApp.factory("user", function () {
return {};
});
I inject user service in HomeController like
myApp.controller("HomeController", function ($scope, user) {
$scope.user = user;
// and then set values on the object
// $scope.user.address = "1, Mars"; // when uncomment this line it can be accessed on AboutController? Why? Otherwise I cannot access user.address
console.log($scope.user);
});
Don note my comment in above code..
and passes user to AboutController like
myApp.controller("AboutController", function ($scope, user) {
$scope.user = user;
// and then set values on the object
$scope.user.firstname = "John";
$scope.user.secondname = "Smith";
console.log($scope.user);
});
Here is the about.html
<p>
{{ user.address }}
</p>
Problem: {{user.address}} doesn't work on AboutController. I can't see any output... But when i remove the comment from above code.. It only displays hardcoded values in the controller What am I missing?
This is the working demo http://ashoo.com.au/angular/#/

At the moment, all your service does is pass a blank object return {}, to any controller into which it is injected. You need a getter/setter approach, so that in your Home view you can set the data, and in your About view you can retrieve it.
So your service could look something like this:
myApp.factory("user", function () {
var dataObj = {};
return {
setData: function(data) {
dataObj.username = data.username;
},
getData: function() {
return dataObj;
}
};
});
Now you can set the data in your Home controller:
myApp.controller("HomeController", function ($scope, user) {
$scope.submitData = function(data) { //pass in ng-model
user.setData(data); //call 'user' service to set data
}
});
And call it from your About controller:
myApp.controller("AboutController", function ($scope, user) {
$scope.user = user.getData(); //Assign
console.log($scope.user.username);
});
And you html would look like:
<form action="#/about" ng-submit="submitData(user.username)">
<input type="text" name="address" ng-model="user.username" />
<input type="submit" />
</form>

Angularjs ui bootstrap modal sharing information to same controller

I have the following modal set up in my cloud controller. I'm not giving this modal a specific controller to work off of because the goal is to share it with my cloud controller.
I don't tell the modal that it should be using the cloud controller because then the controller will get run twice, and I do not want this to happen.
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('cloud', {
url: '/cloud',
controller: 'cloud',
templateUrl: 'pages/templates/cloud.html'
})
})
.controller('cloud', function($scope, $rootScope, $http, $state, $stateParams, $modal) {
$scope.toggleModal = function () {
$scope.renameModal = $modal.open({
animation: true,
templateUrl: 'pages/templates/modal.html',
size: "md",
scope: $scope
});
}
$scope.submit = function(data) {
console.log($scope.inputData, data);
}
})
The issue I am trying to solve is with an input box in my modal template. I am trying to submit the text, have it be shared, and hopefully updated to one of my $scope variables inside the cloud controller.
Below you can see my modal.html where on submit, it runs the submit() function in my cloud controller. It run's successfully but the console log returns undefined for both $scope.inputData and data.
<div class="modal-header">
<h3 class="modal-title">title</h3>
</div>
<div class="modal-body">
<input type="text" id="rename_item" ng-modal="inputData" value="" />
</div>
<div class="modal-footer">
<button class="btn_submit fade" ng-click="submit(inputData)">Rename</button>
</div>
Could anyone help me figure out what I am doing wrong or how I can get this data over to my current cloud controller?

A BIG shoutout to camden_kid for catching my mistake of misspelling ng-model. I accidentally did ng-modal.
Just correcting that spelling didn't fix it though.
I don't know why (maybe someone can help explain), but I had to use an object that was already created to get this to work. Just using a variable that was pre-defined didn't work.
So this is my change in my cloud controller:
.controller('cloud', function($scope, $rootScope, $http, $state, $stateParams, $modal) {
$scope.toggleModal = function () {
$scope.renameModal = $modal.open({
animation: true,
templateUrl: 'pages/templates/modal.html',
size: "md",
scope: $scope
});
}
$scope.inputText = {data: ""};
$scope.submit = function(data) {
console.log($scope.inputText.data);
}
})
And then I did the following to my html:
<input type="text" ng-modal="inputText.data" />

Get and set a checkbox in Ionic Framework (AngularJS)

I need to track when a user changes the state of a checkbox in Ionic, save it to localStorage, and then use it to load again later - so it remembers their settings.
My toggle code looks like this:
<li class="item item-toggle">
National Insurance {{ni_toggle}}
<label class="toggle toggle-positive">
<input type="checkbox" ng-model="ni_toggle" ng-click="updateLocalStorage()" id="has_national_insurance" name="has_national_insurance">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
And in my controller I have:
angular.module('starter.controllers', [])
.controller('SettingsCtrl', function($scope, $ionicPlatform) {
$ionicPlatform.ready(function() {
// Ready functions
});
$scope.updateLocalStorage = function() {
window.localStorage.setItem( 'has_national_insurance', $scope.ni_toggle );
console.log( $scope.ni_toggle );
}
})
However, it logs out to the console as undefined. If I explicitly set $scope.ni_toggle = false; it will log false and won't update to true when I toggle the checkbox to on.
EDIT:
app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('tab.info', {
url: '/info',
views: {
'tab-info': {
templateUrl: 'templates/tab-info.html',
controller: 'InfoCtrl'
}
}
})
.state('tab.about', {
url: '/about',
views: {
'tab-about': {
templateUrl: 'templates/tab-about.html',
controller: 'AboutCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
controllers.js:
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
})
.controller('SettingsCtrl', function($scope, $window, $ionicPlatform) {
$ionicPlatform.ready(function() {
});
$scope.ni_toggle = $window.localStorage.getItem('has_national_insurance') === "true";
$scope.updateLocalStorage = function() {
$window.localStorage.setItem( 'has_national_insurance', $scope.ni_toggle );
console.log( $scope.ni_toggle );
}
})
.controller('InfoCtrl', function($scope) {
})
.controller('AboutCtrl', function($scope) {
});
templates/tab-settings.html:
<li class="item item-toggle">
National Insurance {{ni_toggle}}
<label class="toggle toggle-positive">
<input type="checkbox" ng-model="ni_toggle" ng-change="updateLocalStorage()" id="has_national_insurance" name="has_national_insurance">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
Working example of the problem

I am not familiar with Ionic's oddities (if there are any), but from a general JS perspective there seem to be a few issues with your code.
You are not initializing ni_toggle.
You are using ngClick which will get fired before the model has been updated by the ngModel directive.
You should use ngChange instead.
In Angular, you should use $window instead of window (it doesn't hurt and it can prove useful in many cases (e.g. testing)).
Note that localStorage can only store strings (not booleans). So, even if you pass false, it will be stored as 'false', which is equivalent to true when cast to boolean.
Taking the above into account, your code should look like this:
<input type="checkbox" ng-model="ni_toggle" ng-change="updateLocalStorage()" ... />
.controller('SettingsCtrl', function($scope, $window, $ionicPlatform) {
$ionicPlatform.ready(function() {
// Ready functions
});
$scope.ni_toggle = $window.localStorage.getItem('has_national_insurance') === 'true';
$scope.updateLocalStorage = function () {
$window.localStorage.setItem('has_national_insurance', $scope.ni_toggle);
console.log($scope.ni_toggle);
};
});
See, also, this short demo.

I ran into a similar situation for displaying user information a while ago with my ionic app. I don't have my original source code in front of me but I'm pretty sure this is how you need to do it.
angular.module('starter.controllers', [])
.controller('SettingsCtrl', function($scope, $ionicPlatform) {
this.toggle = true; // make sure its defined somewhere
$scope.ni_toggle = function() {
return this.toggle;
}
$scope.updateLocalStorage = function() {
window.localStorage.setItem(
'has_national_insureance',
$scope.ni_toggle
);
console.log($scope.ni_toggle);
}
});
Hope this gets you going in the right direction.
EDIT
See ExpertSystem's answer. He answered it way better than I could.

No need of any function definition in controller
<script>
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.checkboxModel = {
value1 : true,
value2 : 'YES'
};
}]);
<form name="myForm" ng-controller="ExampleController">
<label>Value1:
<input type="checkbox" ng-model="checkboxModel.value1">
</label><br/>
<label>Value2:
<input type="checkbox" ng-model="checkboxModel.value2"
ng-true-value="'YES'" ng-false-value="'NO'">
</label><br/>
<tt>value1 = {{checkboxModel.value1}}</tt><br/>
<tt>value2 = {{checkboxModel.value2}}</tt><br/>

Access file input in controller using Angular UI Bootstrap modal

I have a question for all you AngularJs gurus out there. I am attempting to create modal wherein a user can submit files for upload. I have most of the problem sorted, however, I seem to be running into issues concerning scope. The technologies I am using are Angularjs, Angular UI Bootstrap and a custom file model directive.
I have a custom fileModel directive which on file selection updates the scope:
app.directive('fileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
});
});
}
}
}]);
I use UI bootstrap to create the modal as per the documentation (http://angular-ui.github.io/bootstrap/#/modal). Please note the file-model="file" directive in the input field, this is what I am trying to access.
<div ng-controller="ModalDemoCtrl">
// Button to open model
<button class="btn btn-default" data-ng-click="open()">Upload File</button>
// Simple Form in model
<script type="text/ng-template" id="myModalContent.html">
<form name="form.myForm" class="form-horizontal" data-ng-submit="addFile()" role="form" novalidate>
<div class="modal-header">
<h3 class="modal-title">Upload File</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="file" class="col-sm-2 control-label">Input File</label>
<div class="col-sm-10">
<input type="file" name="file" file-model="file">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</script>
</div>
Lastly I have the controller(s), again as per the Bootstrap UI documentation. Please note where I try to access $scope.file.
app.controller('ModalDemoCtrl', ['$scope', '$http', '$modal', function ($scope, $http, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
$http: function () {
return $http;
}
}
});
modalInstance.result.then(function () {
// do something
}, function () {
// do something
});
};
}]);
var ModalInstanceCtrl = function ($scope, $modalInstance, $http) {
$scope.addFile = function() {
var formData = new FormData();
formData.append('file', $scope.file);
$http.post(
'/valid/ajax/url', formData, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data, status, headers, config) {
// do something on success
});
);
};
I know there are some issues with regards to scope within modals when using angular UI bootstrap... unfortunately I am not experienced enough to find a solution. Currently, I am unable to access the file a user selects to be sent via ajax. Please help. Thanks.

I saw that the variable "$scope.file" is not being set, it stays undefined. Therefore you can't post the file. An easy way to share data between controllers (you have two, the modal controller and you parent controller) is using a service or factory. Check documentation if you are not sure. Then you can change the save the file via service/factory and use it in both controllers.
First of all the service which just contains a getter and a setter:
app.service('fileService', function () {
var file;
var fileService = {};
fileService.getFile = function () {
return file;
};
fileService.setFile = function (newFile) {
file = newFile;
};
return fileService;
});
You can then use the service via dependency injection on the directive and the controller:
app.directive('myFileUpload', function (fileService) {
return function (scope, element) {
element.bind('change', function () {
fileService.setFile(element[0].files[0]);
});
}
});
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, $http, fileService) {
$scope.addFile = function () {
var file = fileService.getFile();
console.log(file);
$http.post(
'http://posttestserver.com/post.php', file, {
transformRequest: angular.identity,
headers: {'Content-Type': file.type}
}).success(function (data, status, headers, config) {
console.log(data);
});
};
});
I created a fiddle so you can test it there. The file is outputted on the console. For testing the post I used http://posttestserver.com/post.php
http://jsfiddle.net/dz5FK/