I have angular 1.5 Version. The Text Area is not giving the live preview. I've written ng-model and written controller code, now I have no idea what is missing in it.
Controller Code:
(function() {
var app = angular.module('wildfire', []);
var updateStatusText = 'test';
app.controller('UpdateStatusController', function() {
this.message = updateStatusText;
this.updateStatus = function(text) {
var StatusObject = {};
updateStatusText = text;
}
});
}
HTML Code:
<div class="well">
<form class="form-horizontal" role="form" ng-controller="UpdateStatusController as statusUpdate" ng-submit="statusUpdate.updateStatus(statusUpdate.message)">
<h4>What's New</h4>{{statusUpdate.message}}
<div class="form-group" style="padding:14px;">
<textarea class="form-control" ng-model "statusUpdate.message" placeholder="Update your status"> </textarea>
{{statusUpdate.message}}
</div>
</div>
Its not giving the live preview and after submitting it does not send any value associated with the TextArea. I debugged it several time but no result totally frustrating.
Change this
ng-model "statusUpdate.message"
To this
ng-model = "statusUpdate.message"
Complete example
<div class="well">
<form class="form-horizontal" role="form" ng-controller="UpdateStatusController as statusUpdate" ng-submit="statusUpdate.updateStatus(statusUpdate.message)">
<h4>What's New</h4>{{statusUpdate.message}}
<div class="form-group" style="padding:14px;">
<textarea class="form-control" ng-model= "statusUpdate.message" placeholder="Update your status"> </textarea>
{{statusUpdate.message}}
</div>
</div>
angular.module('wildfire', []).controller('UpdateStatusController',['$scope', '$http', function($scope, $http){
var updateStatusText = 'test';
this.message = updateStatusText;
this.updateStatus = function(text) {
var StatusObject = {};
updateStatusText = text;
}
}]);
Related
I created edit form so I have to include default value for each text field. I wrote this HTML code:
<input type="text" ng-model="projectData.title" ng-init="projectData.title=title" name="title" class="form-control" />
In controller:
$scope.title = "This is just title";
It shows nothing in the text box. I tried ng-init="projectData.title={{title}}" and ng-init="projectData.title='title'" but it's just not working.
I'm using angularjs 1.6 and the following solution is not working too.
http://jsfiddle.net/Aejvm/337/
In your scope, you should declare the object like so:
$scope.projectData = {};
$scope.projectData.title = "This is just title";
Check This [Code][1]
[1]: http://jsfiddle.net/d4ts76ys/
Use the object to map it to ng-model
Well you are doing a little wrong.
ng-init is angular directive and you dont need curly braces.
modify your code to this :
html:
<div ng-controller="MyCtrl">
<input type="text" ng-init="rootFolders.name=name" ng-
model="rootFolders.name" >
<br>rootFolders={{name}}
</div>
js:
var app = angular.module('myApp',[]);
app.controller('MyCtrl', function($scope) {
$scope.name = "Acunisasi";
});
I have created fiddle that may help your
jsfiddle
//html
<div ng-controller='MyCtrl'>
<form>
<input ng-init="projectData.title = title" type="text" ng-model="title">
<button ng-click="formSubmit()">
submit
</button>
</form>
{{title}}
</div>
//js
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', MyController]);
function MyController($scope) {
$scope.projectData = {};
$scope.title = 'This is just title';
$scope.formSubmit = function() {
console.log("$scope.projectData ===>", $scope.projectData)
}
}
I am a newbie in AngularJS. I am having multiple forms on a single page which gets displayed based on the user selection only one at a time.
The DOM has two child controllers namely FirstFormController, SecondFormController wrapped under a parent controller named XceptionController.
A parent controller function is used to submit the form data from both the children. The form data is saved on to the parent controller's scope.My HTML looks like below
<div ng-app="app">
<div class="container" ng-controller="XceptionController">
<form class="form-container">
<select id="select-form" ng-change=selectForm() ng-model="selectedForm">
<option value="select" disabled selected>Select an Option</option>
<option value="firstform">Get Firstname</option>
<option value="secondform">Get Lastname</option>
</select>
</form>
<div ng-controller="FirstFormController" class="firstform" ng-show="fname">
<form name="firstnameform">
<input type="text" name="firstname" ng-model="form.firstname" id="firstname">
<label for="#firstname">Firstname</label>
</form>
<div class="content" ng-show="fname">
<p>Firstname is {{form.firstname}}</p>
</div>
</div>
<div ng-controller="SecondFormController" class="secondform" ng-show="lname">
<form name="lastnameform">
<input type="text" name="lastname" ng-model="form.lastname" id="lastname">
<label for="#lastname">Lastname</label>
</form>
<div class="content" ng-show="lname">
<p>Lastname is {{form.lastname}}</p>
</div>
</div>
<button ng-click="submitForm(form)">Submit</button>
And my js looks like
var app = angular.module('app', []);
app.controller('XceptionController', function($scope){
$scope.form = {};
$scope.selectedForm = '';
$scope.selectForm = function() {
$scope.lname = 0;
$scope.fname = 0;
var foo = angular.element(document.querySelector('#select-form')).val();
if(foo == 'firstform') {
$scope.fname = 1;
}
else if(foo == 'secondform'){
$scope.lname = '1';
}
};
$scope.submitForm = function(form){
//form data
console.log(form);
};
});
app.controller('FirstFormController', function($scope){
$scope.firstname = "";
});
app.controller('SecondFormController', function($scope){
$scope.lastname = "";
});
But on submitting the form I get the data from both the forms since I set it on the parent's scope. Is there a way by which I can submit the form and get the form data only for the form which is currently displayed. This fiddle will help you more in understanding my question. https://jsfiddle.net/xmo3ahjq/15/
Also help me in knowing if my code is properly written the way it should be or is there a better way to implement this. Should the form submission code be placed under a separate angular service ?
var app = angular.module('app', []);
app.controller('XceptionController', function($scope) {
$scope.form = {};
$scope.selectedForm = null;
$scope.selectForm = function() {
// reset the form model object
$scope.form = {};
};
$scope.isSelected = function(formName) {
return $scope.selectedForm === formName;
};
$scope.submitForm = function(form) {
// form data
console.log(form);
};
});
app.controller('FirstFormController', function($scope) {
});
app.controller('SecondFormController', function($scope) {
});
<div ng-app="app">
<div class="container" ng-controller="XceptionController">
<form class="form-container">
<select id="select-form" ng-change=selectForm() ng-model="selectedForm">
<option value="" disabled selected>Select an Option</option>
<option value="firstform">Get Firstname</option>
<option value="secondform">Get Lastname</option>
</select>
</form>
<div ng-controller="FirstFormController" class="firstform" ng-show="isSelected('firstform')">
<form name="firstnameform">
<input type="text" name="firstname" ng-model="form.firstname" id="firstname">
<label for="#firstname">Firstname</label>
</form>
<div class="content">
<p>Firstname is {{form.firstname}}</p>
</div>
</div>
<div ng-controller="SecondFormController" class="secondform" ng-show="isSelected('secondform')">
<form name="lastnameform">
<input type="text" name="lastname" ng-model="form.lastname" id="lastname">
<label for="#lastname">Lastname</label>
</form>
<div class="content">
<p>Lastname is {{form.lastname}}</p>
</div>
</div>
<button ng-click="submitForm(form)">Submit</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
I am trying to $http.post a JSON object from a form. I can't seem to find the right syntax. Let's assume my form only takes one value (name). I use ng-model to bind the name to an object called modcampaign.name.
What's the correct syntax to post this to a http service?
Further, what if I had another input box, Description, and only want to bind this to modcampaign.description if the user entered data in the input box? If the input box is empty, I'd like to take the value for .description from another object (like modcampaign2.description).
<form ng-submit="modifyCampaign(selCampaign, newName)" class="form-horizontal" name="modCampaign">
<!-- Modify Name -->
<div class="form-group">
<label class="col-lg-2 control-label" for="modName">Name</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="modName" ng-model="modCampaign.name"/>
</div>
</div>
</form>
This is the script file:
var myApp = angular.module('myApp', []);
myApp.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/campaigns.json').success(function (data) {
$scope.campaigns = data;
});
$http.post('js/campaign_mod.json').success(function (data) {
data = $scope.modCampaign;
});
$scope.selCampaign={};
$scope.selectCampaign = function (campaign) {
$scope.toggleCampaign = !$scope.toggleCampaign;
$scope.selCampaign = campaign;
};
$scope.abbrechen = function () {
$scope.toggleCampaign = !$scope.toggleCampaign;
};
$scope.submit = function () {
$http.post('')
}
}]);
You can include something like this in your controller:
$scope.modCampaign = {};
//this gets called on ng-submit
$scope.submitData = function(){
$http.post("api-end-point", $scope.modCompaign).success(function(data, status) {
//handle response etc.
});
}
Your html will have something like this:
<form ng-submit="submitData()" class="form-horizontal" name="modCampaign">
<!-- Modify Name -->
<div class="form-group">
<label class="col-lg-2 control-label" for="modName">Name</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="modName" ng-model="modCampaign.name"/>
<textarea ng-model="modCampaign.description"/></textarea>
</div>
</div>
</form>
you can use JSON.stringify()
example
$http({
method: "POST",
url: 'http://www.example.com/posturl',
data : JSON.stringify($scope.modcampaign)
}).success(function(response){
console.log(response);
// write any action after post success
})
<form ng-submit="modifyCampaign(modCampaign)" class="form-horizontal" name="modCampaign">
<!-- Modify Name -->
<div class="form-group">
<label class="col-lg-2 control-label" for="modName">Name</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="modName" ng-model="modCampaign.name"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="modDescription">Description</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="modDescription" ng-model="modCampaign.description"/>
</div>
</div>
</form>
var myApp = angular.module('myApp', []);
myApp.controller('ListController', ['$scope', '$http', function($scope, $http) {
$scope.modifyCampaign = function(modCampaign) {
console.log(modCampaign)
alert(modCampaign.name) // name:"jane"
alert(modCampaign.description) // description: "hello"
$http.post('js/campaign_mod.json', { name: modCampaign.name, description: modCampaign.description }).success(function (data) {
console.log(data)
});
}
}]);
This method lets you bind all the form value to one object and then you can decode the value in your controller file, below is a link to a working example
http://codepen.io/anon/pen/VjYLvg
I got two elements paragraph and input tag. When i click the paragraph, the input should show and paragraph should hide. when the input is blurred the input should hide and paragraph should show.
I tried this but not working
<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" ng-blur="edit = false">
<input type=text name="email" ng-blur="blurUpdate()" />
</div>
Move ng-blur to input please see demo below
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope, $timeout) {
$scope.showEditor = function() {
$scope.edit = true;
var textbox = document.getElementById("input_email");
var tmp = $scope.text
$scope.text = ""
$timeout(function() {
textbox.focus();
$scope.text = tmp;
});
}
$scope.blurUpdate = function() {
// add this line
$scope.edit = false;
//your code
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl" ng-init="text='some text'">
<p ng-click="showEditor()" ng-show="!edit">{{text}}</p>
<div ng-show="edit">
<input type=text name="email" ng-blur="blurUpdate()" ng-model="text" id="input_email" />
</div>
</div>
</div>
the ngBlur is compatible with input tag, that is why it is not working:
<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" >
<input type=text ng-blur="edit = false" name="email" />
</div>
http://jsfiddle.net/xgp2qsww/1/
For a bit of background, I am trying to create a simple form that will allow a user to send a message. I am using ui-select2 to allow the user to search for the message recipient, but for some reason selecting the user doesn't update the necessary scope variable.
<div ng-show="message_page == 'Compose'" ng-controller="userctrl" class="col-sm-9">
<section class="panel">
<header class="panel-heading wht-bg">
<h4 class="gen-case"> Compose Mail
<form action="#" class="pull-right mail-src-position">
</form>
</h4>
</header>
<div class="panel-body">
<div class="compose-mail">
<form role="form-horizontal" method="post">
<div class="form-group">
<label for="to" class="">To:</label>
<select style="min-width:150px" ui-select2 ng-model="message.recipient" data-placeholder="Who do you want to message?">
<option ng-repeat="user in users" value="user.id">{{user.name}}</option>
</select>
{{message}}
</div>
<div class="form-group">
<label for="subject" class="">Subject:</label>
<input ng-model="message.subject" type="text" tabindex="1" id="subject" class="form-control">
</div>
<div class="compose-editor">
<textarea ng-model="message.content" class="wysihtml5 form-control" rows="9"></textarea>
</div>
<div class="compose-btn">
<button ng-click="send()" class="btn btn-primary btn-sm" onclick="$('#cc').parent().addClass('hidden'); $('#cc').focus();"><i class="fa fa-check"></i> Send</button>
</div>
</form>
</div>
</div>
</section>
</div>
</div>
This is the relevant html code (which is a template for a directive) and here is the directive code:
.directive('messageslist', function(){
return{
templateUrl: 'message-list-template.html',
restrict: 'E',
controller: function(Auth, $scope, $rootScope, $timeout, ListMessagesSvc, SingleMessageSvc, MessageCreateSvc){
$scope.message = {};
var messagesLoader = function(){
ListMessagesSvc.query().$promise.then(function(data){
$rootScope.messages = $scope.messages = data;
var unread_messages_count = 0;
for(var i = 0; i < $scope.messages.length; i++){
if($scope.messages[i].type == "unread"){
unread_messages_count++;
}
}
console.log("There are " + unread_messages_count + " unread messages");
$rootScope.unread_messages_count = $scope.unread_messages_count = unread_messages_count;
})
}
$scope.refresh_messages = function(){
if(Auth.isAuthenticated()){
messagesLoader();
}
}
$scope.open_message = function(message_id){
console.log("The message is being opened" + message_id);
SingleMessageSvc.get({id: message_id}).$promise.then(function(data){
$scope.current_message = data;
})
$scope.message_page = "Single";
}
$scope.inbox = function(){
if(Auth.isAuthenticated()){
messagesLoader();
}
$scope.message_page = "Inbox";
}
$scope.compose = function(){
$scope.message_page = "Compose";
}
$scope.send = function(){
console.log($scope.message);
MessageCreateSvc.save($scope.message).$promise.then(function(data){
$scope.message = null;
$scope.message_page = "Inbox";
});
}
$scope.discard = function(){
$scope.message = null;
$scope.message_page = "Inbox";
}
var infiniteLoop = function(){
$timeout(function(){
if(Auth.isAuthenticated()){
messagesLoader();
}
infiniteLoop();
}, 60000);
}
if(Auth.isAuthenticated()){
messagesLoader();
}
infiniteLoop();
$scope.message_page = "Inbox";
}
}
})
I have tried the directive both with and without the link element and the scope element, but these changes didn't seem to make any difference. I have also attempted to output the contents of the message object, and while it does pick up changes to the content and the topic it doesn't pick up changes to the recipient. Also, I have successfully used ui-select2 elsewhere in my application so I am not sure what it different about this instance.
Let me know if you need any more information.
You have to change this:
value="user.id"
to this:
value="{{user.id}}"
or this:
ng-value="user.id"
Otherwise all the values will be 'user.id'
For anyone with a similar issue to myself, try removing the controller element. Fixed the issue for me!