We Keep Coding

ng-repeat with form in angularjs

I have created dynamic forms with ng-repeat directive. I am getting form field according to userid value. Once I have filled every field in form my add user button should be enabled. As of now its not enabled. I have attached my code below.
My html code:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="myid in userid">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="manualComment" id="textarea1" rows="1"></textarea>
</div>
<div class="col-md-3 ">
<label>Gender</label>
<select ng-model="gender" name="select2">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="!(myid && manualComment && gender)" type="button" id="adduser">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
my app.js file
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.userid = [1, 2, 3]
});
How can I enable add user button once all field are filled?

Update:
If you want to convert your initial array from the server to a usage array check this fiddle
JSFiddle Demo
If you want an object which contains all the form values, please refer to the below fiddle!
JSFiddle Demo
Based on the statement below, this is my solution.
How can I enable add user button once all field are filled?
I have added the required attribute to all the input fields, the form name userForm is a variable in the scope. It has its validation variables, in my case I am using userForm.$invalid which will be true unless all the fields with required attribute are filled. The Add User is disabled by using the ng-disabled attribute, check the below JSFiddle for a demo.
JSFiddle Demo
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="myid in userid">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Gender</label>
<select ng-model="gender" name="select2" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
</div>

Squarespace Donation Submit Redirect with Javascript?

I have two separate donation forms that need to redirect to their own custom 'Thank You' pages once submitted. Squarespace does not give you the option to do this and instead defaults to a preset, generated page. I believe what I am looking for--and I could be wrong--is some custom Javascript that can handle the request.
Below is the HTML for the first form:
https://secure.squarespace.com/commerce/donate?donatePageId=56a99e1557eb8df616ef2dad
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480624209818_107" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480624209818_109" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480624209818_163" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480624209818_165" class="sqs-checkout-form-payment-content”>
<div class="title">
<fieldset id="yui_3_17_2_1_1480624209818_836">
<div class="subtitle">Billing Address</div>
<!-- bill to shipping -->
<!-- Billing Information —>
<div id="billing-address">
<div id=“credit-card”>…</div>
<div class="subtitle">Secure Payment</div>
<!--
Credit Card Fields
NOTA BENE: These INPUTs are left without 'name' because we ABSOLUTELY must NOT
transmit these values to our own servers.
-->
<div id="credit-card”>…</div>
<!-- Secure payment conditions -->
<div id="comfort”>…</div>
<!-- Place Order -->
<div id="place-order">
<div id="place-order-button" class="button continue-button" value="Place Order">SECURE DONATION</div>
<div class="wait-in-queue-message" style="display: none”>…</div>
<!-- hidden field to convey the Stripe Token so we may submit the charge -->
<input name="stripeToken" type="hidden">
<!-- optional hidden fields -->
<input name="donationAmountCents" type="hidden">
<input name="donatePageId" type="hidden">
<input name="email" type="hidden">
<input name="phone" type="hidden">
<input name="joinMailingList" type="hidden">
</div>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
Below is the beginning of the HTML for the second form (just to show a comparison for the differences):
https://secure.squarespace.com/commerce/donate?donatePageId=583c8b80d2b8571174b04cc8
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480625072856_106" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480625072856_108" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480625072856_162" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480625072856_164" class="sqs-checkout-form-payment-content”>
<div class="title">
Any help would be greatly appreciated.
Thanks so much!

ng-submit is not working

I HAVE A FORM BUT NG SBMIT DOESNOT CALL THE FUNCTION
I dont understand why this form not submitting . i have check every thing but it not even call the alert button also
HTML
<form role="form" name="frmCashback" method="post" ng-submit="CashbackUser(frmCashback, Rates)">
<!-- Personal Details Start -->
<div class="well">
<legend> Cashback Details </legend>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Store">Store:</label>
<select name="Store" class="form-control" ng-model="Rates.Store" ng-options="stores.StoreID as stores.StoreName for stores in StoreList" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Store">Category:</label>
<select name="Category" class="form-control" ng-model="Rates.Category" ng-options="Cate.CategoryID as Cate.CategoryName for Cate in CategoryList" >
<option value="">Select</option>
</select>
</div>
<!-- Modal -->
<!---------Model End-------->
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Cash Back Rate:</label>
<input type="text" class="form-control" name="Cashback" id="Cashback" ng-model="Rates.Cashback" required>
</div>
</div>
</div>
<!---------Model End-------->
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="submit">Add Cashback</button>
</div>
</div>
</div>
<!-- Personal Details End -->
</form>
Here is my controller
CONTROLLER
$scope.CashbackUser = function(frm, Rates) {
alert('Hi');
//query_params.Status = CheckStatus.Action;
//console.log(Rates);
}
I have check :
function is within the controller
I am figthing with this for 4 hr kindly help me.

Your template seems to be having error ,form submit will not work if your template having error think so
<!---------Model End-------->
</div>
</div>

In your form, you can use this:
ng-submit="CashbackUser()"
And in your controller:
$scope.CashbackUser = function(){
console.log($scope.frmCashback);
console.log($scope.Rates);
}

Clear form on `mfp-close` in magnific popup

I am trying to clear all the errors and make input values blank on closing of magnific popup.
I inspected the class of 'close' button and tried to fire jquery event but it is not working.
$("button.mfp-close").on('click',function(){
console.log("Closed");
});
When i click on mfp-close then there is no log in console.
HTML snippet is:
<div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p><form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst"
placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>
</div></div>
How can we handle this operation??

First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal
in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")
To reset form on pop-up close, you can achieve it with $('form')[0].reset();
Script
$("button.mfp-close").on('click',function(){
alert("Closed");
$('form')[0].reset();
});
HTML
<a class="popup-modal" href="#customdesign">Open modal</a>
<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p>
<span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p>
<form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
</div>
Working fiddle example

Adding ng-autocomplete to input tag when dynamically creating the input tag via Javascript

"Sorry for my English as it is not my native language"
On to the problem. I have a trouble with ng-autocomplete when I dynamically create form fields.
The ng-autocomplete works fine when I create an input tag in the index file but when I try to add more tags via the javascript function the ng-autocomplete does not work in the new input tags created..
As you see in the picture the two input fields "Travel from" and "Travel to" have ng-autocomplete but the input field "travel via" which is created by the javascript function does not have ng-autocomplete..
The question is how can I add a working ng-autocomplete for every created input field via the function?
Down below is the script.js file with the code for creating the input tag
$(document).ready(function(){
var i=1;
$("#add_city").click(function(){
$('#end_city'+i).html('<input type="text" class="form-control input-lg ng-isolate-scope" name="via_city" ng-autocomplete="via_city" placeholder="Travel via" autocomplete="off" />');
$('#tab_logic').append('<div id="end_city'+(i+1)+'"></div>');
i++;
});
$("#delete_city").click(function(){
if(i>1){
$("#end_city"+(i-1)).html('');
i--;
}
});
});
And there is the index.php
<div class="page-header">
<h4>Create your trip</h4>
</div>
<form ng-submit="submitTrip()"> <!-- ng-submit will disable the default form action and use our function -->
<!-- START CITY -->
<div class="form-group col-md-6">
<input type="text" class="form-control input-lg" name="start_city" ng-autocomplete="tripData.start_city" placeholder="Travel from">
</div>
<!-- END CITY -->
<div class="form-group col-md-6" id="tab_logic">
<div id="end_city0">
<input type="text" class="form-control input-lg" name="end_city" ng-autocomplete="tripData.end_city" placeholder="Travel to">
</div>
<div id="end_city1"></div>
</div>
<!-- START DATE -->
<div class="form-group col-md-6">
<input type="date" class="form-control input-lg" name="start_date" ng-model="tripData.start_date" placeholder="Travel date">
</div>
<!-- END DATE -->
<div class="form-group col-md-6">
<input type="date" class="form-control input-lg" name="end_date" ng-model="tripData.end_date" placeholder="Return date">
</div>
<!-- COMMENT -->
<div class="form-group col-md-12">
<textarea class="form-control input-lg" name="comment" ng-model="tripData.comment"></textarea>
</div>
<!-- Img -->
<div class="form-group col-md-12">
<input type="text" class="form-control input-lg" name="img" ng-model="tripData.img" placeholder="Image source">
</div>
<!-- SUBMIT BUTTON -->
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
<a id="add_city" class="btn btn-default pull-left">Add City</a><a id='delete_city' class="pull-right btn btn-default">Delete City</a>
</div>
</form>
I have looked at these two examples and I dont know why it does not work.. Please if anybody knows how to fix this problem it would help a lot :)
http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview
http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion
Thanks!
/K.A.

You need to compile the element by using the $compile service:
...
$('#tab_logic').append('<div id="end_city' + (i + 1) + '"></div>');
var element = angular.element(document.querySelector('#end_city' + i));
var scope = element.scope();
var $compile = element.injector().get('$compile');
$compile(element)(scope);
...
Good short explanation of how to work with Angular from the 'outside' can be found here.