there is forms inside ng-repeat. When i submit any form then last form is submitted every time that's wrong.
only selected form need to submit.
My code is
<ul rn-carousel rn-carousel-indicator style="list-style: none">
<li ng-repeat="story in stories">
<form ng-submit="commentsSubmit($index)" method="post">
<input type="hidden" ng-init="comment.itemID = story.news_id" ng-model="comment.itemID">
<input type="hidden" ng-init="comment.owner_id = 1" ng-model="comment.owner_id">
<input type="hidden" ng-init="comment.type = 'L'" ng-model="comment.type">
<input type="hidden" ng-init="comment.from = 'app'" ng-model="comment.from">
<input type="hidden" ng-init="comment.user_id = user_id" ng-model="comment.user_id">
<input type="hidden" ng-init="comment.redirect = 'story'" ng-model="comment.redirect">
<textarea ng-model="comment.content" class="textarea" rows="3" placeholder="Your Comment">{{ content }}</textarea>
<button class="button--cta">Submit</button>
</form>
<li>
</ul>
How i achieve this?
There is already a similar question discussed about this,
FYI form submission on ng-repeat
Pass the object instead of id, in your controller,
$scope.commentsSubmit = function(story)
Do submit like this, <form ng-submit="submit(story)">
$scope.commentsSubmit = function(story){
var comments = story;
$http({ data: $.param($scope.comment)
}).success(function(data) {
MyCache.put('comments-'+$scope.comment.itemID, data.reviews);
})
};
Related
I'm trying to set some fields to dirty after a specific button is clicked.
template
<div class="col-md-4">
<label class="radio radio--inline">
<input type="radio" class="radio__control" name="radio_Role"ng-model="Form.RoleCheck" value="1" required>
<span class="radio__label">
Whatever
</span>
</label>
</div>
<button id="gotoPersonendatenVn" ng-click="dirty()" type="button">
Dirty
</button>
app.js
$scope.dirty = function(){
$scope.Form.RoleCheck.$setDirty();
}
I've tried different things but i always get "TypeError: $scope.Form.RoleCheck is undefined"
Firstly, check where you try to add $setDirty, you try add it to ngModel, not to the name="radio_Role"
And where is yours form
<form name="Form">
<input type="radio" class="radio__control" name="radio_Role" ng-model="modelName" value="1" required>
if you want set input as dirty
$scope.Form.radio_Role = false;
Here is my html form in laravel application which has hidden fields, these hidden values need to send to the angular js controller.
<form accept-charset="UTF-8" enctype="multipart/form-data">
<input name="_token" type="hidden" value="{{ csrf_token() }}">
<input name="user_id" type="hidden" value="{{ Auth::user()->id }}">
<input name="post_id" type="hidden" value="<% post.id %>" >
<input name="published_at" type="hidden" value="{{ Carbon\Carbon::today()->format('Y-m-d') }}">
<input class="form-control" placeholder="comment" ng-model="contentField" type="text" >
<button type="submit" ng-click="addComment()">comment</button>
</form>
My Angular Controller is as follows
$scope.addComment = function(){
var comment = {
user_id: $scope.user_id,
content: $scope.contentField,
post_id: $scope.post_id,
published_at: $scope.published_at
};
I am only getting the value of contentField in the controller, Please Help me to solve this problem !
It seems that you are missing the ng-model tags on your hidden imports. Because of that angular does not know how or where to bind the hidden input values to the $scope. Adding those tags to all of the hidden inputs should fix your issue of them not being found on the $scope.
We can simply try like this:
<input type="hidden" ng-model="post_id" ng-init="post_id=<% post.id %>"/>
OR
<input type="hidden" ng-model="post_id" value="{{post_id}}" ng-init="post_id=<% post.id %>"/>
OR
<input type="hidden" ng-model="post_id" value="<% post.id %>" ng-init="post_id=<% post.id %>"/>
Note: here ng-init is doing the trick binding whatever from another model or object or direct value :)
I have a form in my html page:
<div id=update>
<form class="form-inline" ng-submit="updateCompany(company.companyId,company.companyName,company.newPassword,company.newEmail)" ng-show="updateForm">
<h3>Update Company</h3>
<div class="form-group">
<input type="text"
class="form-control" id="companyId" value={{company.companyId}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyName"
value={{company.companyName}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyPassword"
placeholder="Enter New Password" ng-model="company.newPassword"/>
</div>
<div class="form-group">
<input type="email"
class="form-control" id="companyEmail" placeholder="Enter New Email"
ng-model="company.newEmail" />
<button type="submit" class="btn btn-default">UPDATE</button>
</div>
</form>
</div>
I would like to show the current company values(id,name,password,email),
in the text fields, than give the user option to change the password and the email and send all the parameters when I submit the form.
The problem is when I put the ng-model on the text field, the current value disappears.
I need a fix for that!!!
In the first two fields I see the value now because I don't have the ng-model on them, once I put ng-model it disappear.
In your controller just attach the company data to scope like this:
$scope.company = yourcompanydata
And as for submitting the data, you don't have to list all the parameters in your html. In your html just leave:
ng-submit="updateCompany()"
And in your controller:
$scope.updateCompany = function(){
// your submitting logic here and all the company data will
// be available under $scope.company
// including the new password and email entered by the user
// so your submitting logic could look something like this:
submitCompanyData($scope.company.companyId, $scope.company.newPassword,...)
}
Here is a simple version codepen to get you started, depending what you'd like to do with data afterwords. I can update as needed.
angular
.module('app', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.company = {};
vm.info = info;
function info(info) {
console.log(info);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app'>
<div class="container" ng-controller="ExampleController as vm">
<form novalidate>
<input type="text" ng-model="vm.company.name" required/>
<input type="email" ng-model="vm.company.email" required/>
<input type="submit" ng-click="vm.info(vm.company)" value="Submit" />
</form>
{{vm.company| json}}
</div>
</body>
This is my Fiddle.
http://jsfiddle.net/0c5p38dt/1/
In the above fiddle use ng-model in textfield and add save button
<input type="text" ng-model="eachItem.value"/>
<input type="button" value="save" ng-click="save()"/>
and i write code in js file :-
$scope.save=function(){
console.log($scope.data);
};
In the above code first i click add button when i enter data in first textfield(name) that will also effect on second textfield(name). I want to save the data . So how to differentiate these textboxes.
you should use a 'name' attribute in your input fields with angular
$index
on ng-repeat.
in your Fiddle:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="eachItem in data">
<input type="button" value="add" ng-click="addFields(eachItem)"/>
<label>{{eachItem.label}}</label>
<input type="text" name="eachItem.label[$index]" />
</div>
</div>
</div>
The result would be like:
<input type="text" name="email[1]">
<input type="text" name="email[2]">
<input type="text" name="email[3]">
<input type="text" name="name[1]">
<input type="text" name="name[2]">
I'm not completely sure what you want, but I don't think you want the <input> in an ng-repeat, maybe what you want is in your .html:
<div ng-app>
<div ng-controller="Ctrl">
<label>Name</label>
<input type="text"ng-model="item.name"/>
<label>Email</label>
<input type="text"ng-model="item.email"/>
<input type="button" value="add" ng-click="addFields(item)"/>
<div ng-repeat="item in data">
<div ng-bind="item.name"></div>
<div ng-bind="item.email"></div>
</div>
</div>
</div>
and in your .js:
function Ctrl($scope) {
$scope.data=[];
$scope.addFields = function (item) {
$scope.data.push(item);
};
}
This will give you the inputs once and then keep track (and display) the data from the inputs
I have the following code, which shows the a.btn anchor if both inputs have values and inputURL is a valid URL. Works fine but I want to hide the button again on click, how do I do this, do I reset the form or actually hide the button on click?
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input name="inputName" type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
What I've done before is create a scope variable in your controller:
$scope.formSubmitted = false;
Then in your saveToList function set $scope.formSubmitted to true. From here you have a few options. If you're "Post" button is an actual button then you could set the disabled attribute. You could also check if formSubmitted is true inside your saveToList function and if it is true you don't continue. Or you can change your ng-show to be:
ng-show="myForm.$valid && !formSubmitted"
you can do something like this:
define another $scope.someToggle variable, and assign it true, then at the ng-show of the button add it like ng-show="myForm.$valid && someToggle". then at the end (or in callback) of saveToList($event) function, set $scope.someToggle to false.
also you can put this on both inputs: ng-change = "someToggle = true" so whenever they change(after the save button has been clicked) you'd be able to bring it back...
HTML
<body ng-app="myApp">
<div ng-controller="formCtrl">
<form name="myForm" class row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input name="inputName" type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
</div>
</body>
controller
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.saveToList = function() {
$scope.mvName = '';
$scope.mvUrl = '';
}
});
Alternative
with scope variable without invalidating form
Post
app.controller('formCtrl', function($scope) {
$scope.logicalExp = "||";
$scope.formSubmitted = true;
$scope.saveToList = function() {
$scope.logicalExp = "&&";
$scope.formSubmitted = true;
}
});
the problem with this is, user needs to invalidate the form by himself by removing entered value then hyperlink will be hidden-ed.