<form ng-submit="update()">
<label class="item item-input item-floatinglabel">
<input type="text" ng-model="word">
</label>
<button class="btn btn-primary"ng-click="OnClick()">Get Words</button>
</form>
This is the current form I have. console logging "word" currently returns the word that's input however for some reason when I attach an <ion-scroll> </ion-scroll> around the form it only returns as "undefined". Is there a work around for this?
You need to create an object in controller and use its properties as models like below.
<label class="item item-input item-floatinglabel">
<input type="text" ng-model="content.word">
</label>
<button class="btn btn-primary" type="submit">Get Words</button>
</form>
In your controller you can get the value like
$scope.content.word
Check the plunker
Hope it helps.
Related
I'm new in AngulsrJS and I've got following code:
<form ng-if="editorCtrl.edit" class="form-horizontal" role="form" ng-submit="editorCtrl.saveEntry()">
<div class="form-group">
<div class="col-md-6" ng-repeat="(key,field) in editorCtrl.editEntry">
<label>{{key}}</label>
<input type="text" class="form-control" value={{field}} />
</div>
</div>
<!-- ng-model="editorCtrl.toSave[key]" ng-value="{{field}}" that part was in input attributes -->
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Update selected entry" ng-disabled="form.$invalid" class="btn btn-primary"/>
</div>
</div>
</form>
Now I need to obtain values from input fields. I tried to use ng-model="editorCtrl.toSave[key], but it's not working in a correct way.
Any suggestions how to resolve this situation ?
if you can consider no necesary the "toSave" object maybe you can use the 2-way data binding properly only using editEntry Object :
<input type="text" class="form-control" value={{field}} ng-model="editorCtrl.editEntry[key]"/>
In this way after a submit you will get editEntry with the fields modifieds (or not), here is an example
https://jsfiddle.net/pv8qrwty/1/
run the example and if you modified the fields after you press the submit button it will be displayed in your browser console
hope this help ! and sorry for my english !
In my code I am using ng-show and ng-required in combination. But, ng-required is not working as expected even when the respective $scope variable value is set to false. Please find the code below
<div role="form" name="selectQuestionsForm" id="selectQuestionsForm" ng-form>
<div class="form-group col-sm-12">
<label class="control-label question-answer-label"
for="firstQuestionSelect">First question</label>
<div>
<select class="form-control nopadding">
<option value="">-- Select --</option>
</select>
</div>
<div ng-show="showCustomQuestion.first" >
<input type="text" class="form-control" ng-model="questionsText.first" ng-required="showCustomQuestion.first"
id="firstQuestionInput" name="firstQuestionInput" validation-min-length="3" validation-max-length="100" />
</div>
<label class="control-label question-answer-label"
for="firstAnswerInput">First answer</label>
<div style="padding-bottom: 15px;">
<input type="text" class="form-control" ng-model="answersText.first"
id="firstAnswerInput" validation-min-length="3" validation-field-required="true" validation-max-length="100" required/>
</div>
</div>
</div>
<div id="securityActionBtnContainer" class="visible-md visible-sm visible-lg">
<button id="saveBtn" type="button" ng-disabled="selectQuestionsForm.$invalid" class="btn btn-default btn-xs pull-right" ng-click="saveQuestion(selectQuestionsForm.$valid)">Save</button>
<button id="cancelBtn" type="button" class="btn btn-xs btn-default pull-right" style="margin-right: 10px;" ng-click="redirect['cancel']()">Cancel</button>
</div>
The select element have a logic to display the option and it is working fine. When we select the option 'Write my own question', the hidden input is displayed. If user choose any other question the custom question input is hidden and not part of the form element. But ng-required is still getting applied though the value is set to the false and respective form doesn't validate.
Please let me know what I am missing to make it work. Thanks in advance for your help.
Use ng-if instead of ng-show. Items hidden using ngShow or ngHide still exist in the DOM and will be processed by angular. It's just not visible to a user.
I'm facing a problem with Angular. My code is simple but ng-hide doesn't work. I want to hide a part of the code when a button of the sign up form has been modified by user. Could you help me?
<body ng-app="myApp" ng-controller="formCtrl">
<form name="signUpForm" ng-submit="signUpFormSubmit(signUpForm.$valid)" novalidate>
<input type="text" placeholder="Email address *" name="signUpEmail">
<input type="text" placeholder="Pseudo *" name="signUpPseudo">
<input type="password" placeholder="Password *" name="signUpPassword">
<button type="submit" class="button button-block button-positive">Sign Up</button>
<div ng-hide="signUpForm.signUpEmail.$pristine || signUpForm.signUpPseudo.$pristine || signUpForm.signUpPassword.$pristine">
<hr>
<div class="padding-horizontal">
<h4 class="center">You already have an account?</h4>
<button class="button button-block button-stable">Sign In</button>
</div>
</div>
</form>
Here is a JsFiddle : http://jsfiddle.net/9ce63mno/3/
UPDATE: although I don't know why a controller is needed in this case, I added one. Also I defined ng-app.
Thank you
I found the problem. Apparently it is because there is no ng-model defined for the form fields.
I am working on a QA app where i need to add multiple answers to a question as per requirement dynamically. for this in my form I have a question field , an answer field and a Boolean correct field to tell if the answer choice is correct or not. I have given a button add another answer which create a new answer field when clicked.I want to give ng-model name dynamically so that I can easily retrieve the value of ng-model.
For this I have created a controller which is like
app.controller('questionsCtrl', function ($scope) {
$scope.question={};
$scope.question.answers=[];
$scope.answer_choices=[];
var choice=1;
$scope.addAnswerField=function(){
$scope.answer_choices.push(choice);
choice++;
}
$scope.addAnswerChoice=function(){
$scope.question.answers.push({});
}
});
My HTML code is:
<div class="container">
<form ng-submit="createQuestion()">
<textarea class="form-control" ng-model='question.question_text'></textarea>
<textarea class="form-control" ng-model="question.answer_choice_1"></textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.correct_1" />
Correct
</label>
<div ng-repeat="choice in answer_choices">
<textarea class="form-control" ng-model="question.answers.$index[answer]">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model = "question.answers.$index[correct]" />
</label>
</div>
<button class='btn btn-primary' type="submit">Submit</button>
</form>
<button class="btn btn-default" ng-click="addAnswerChoice()">Add Answer</button>
</div>
I want to do something like when i add a new answer choice a new empty object is pushed in the question.answers array and this objects first key answer hold the value of question field and second key ` like
question.answers=[
{'answer':'',correct:''},
{'answer':'',correct:''},
{'answer':'',correct:''},
{'answer':'',correct:''},
]
Suggest me how can i do this . There is only one error that using $index i am unable to assign value to the array object at the same index in question.answers array.
Or if there is any other better way suggest me.
Help will be appreciated.
You are making just a small mistake. Correct your syntaxes and it will work fine
replace your ng-repeat div with this code
<div ng-repeat="choice in choices">
<label class="checkbox-inline"> Choice</label>
<textarea class="form-control" ng-model="question.answers[$index].answer">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.answers[$index].correct_answer" value="1" />
Correct
</label>
</div>
And assign values to the radio buttons or these will not show in your object.
I have a page where multiple forms are created based on ng-repeat. Everything works fine until write something into the input and everything gets duplicated on all the other repeated forms input elements. I have used ng-model="Notify.message" which is nothing but object which takes the value from the input and sends to control on button submit and hence rest of the logic.
I am looking for when if one form is been filled, other forms should keep quite and shouldn't duplicate the values written in input text of form 1.
Here is the code:
<div data-ng-show="alluserposts.length > 0">
<div id="b{{userpost.id}}" data-ng-repeat="userpost in alluserposts" >
<div class="row" style="margin-left: -5px">
<form class="text-center" role="form" id=f1{{userpost.id}} name="userForm"
ng-submit="notify(userForm.$valid, userpost, apiMe)" novalidate>
<div class="row">
<div class="col-xs-8 col-md-4">
<div class="form-group">
<input data-container="body" data-toggle="popover" data-placement="top"
data-content="Any message which you would like to convey to post owner"
type="text" ng-model="Notify.message" data-ng-init="Notify.message=''"
id="u{{userpost.id}}"
placeholder="Enter a Message or Phone number" class="form-control"
required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">It is
required.</p>
<script>$(function () {
$("[data-toggle='popover']").popover();
});
</script>
<input type="hidden" ng-model="Notify.loggedInEmail"
ng-init="Notify.loggedInEmail = result.email"/>
<input type="hidden" ng-model="Notify.postId" ng-init="Notify.postId = userpost.id"/>
<input type="hidden" ng-model="Notify.destEmail"
ng-init="Notify.destEmail = userpost.userEmail"/>
</div>
</div>
<div ng-show="loginStatus.status == 'connected'" class="col-xs-4 col-md-2">
<button class="btn btn-primary" ng-disabled="userForm.$invalid || !userForm.$dirty"
type="submit">
Notify Post Owner
</button>
</div>
</div>
</form>
</p>
</div>
</div>
</div>
</div>
Issue fiddle - jsfiddle
Here you can when something is written in one input, other gets filled too :( . Also Notify is a Java mapped object and message is a variable inside it. Pls let me know how can this can be segragated!
You bind all of your inputs to same variable on $scope.
You must bind every text box to a distinct variable on $scope:
View:
<ul ng-repeat="post in posts">
<li>{{$index}}
<input type="text" ng-model="emails[$index]"/>
</li>
</ul>
Controller:
$scope.emails = [];
I am also at the starting phase of angularjs.
I have faced the same issue few days ago and resolved it by providing dynamic model name in ng-model like
<input type="text" ng-model="Notify[post.userEmail]" ng-init="Notify[post.userEmail] = post.userEmail" />
Working fiddle: Fiddle