Develop Reference

Autofill UserId on AngularJS Login Page

I'm working on a iOS app that uses a WKWebView to log into a website. The website presents a login form written in AngularJS that takes a UserId and Password. I'm attempting to pre-fill the UserId using javascript to fill in the appropriate value:
document.getElementsByName('UserId')[0].value = 'MyUserId'
Once submitted, the form returns 'invalid credentials' as if the userid input field has been left blank. If I subsequently make any manual changes to the UserId input field and resubmit it works.
I have verified that the UserId does contain the correct value. I have also tried to change the AngularJS field attributes prior to submitting the form:
ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required
Within my javascript code, I make sure to convert the UserId to a javascript compatible string:
UserId.toString()
Manually typing the UserId and autofill from 1Password works as expected.
I would appreciate any suggestions or advice.
The angular code for the form:
<form class="spark-splash-screen__form spark-text-left ng-dirty ng-valid-parse ng-valid ng-valid-required" novalidate="" name="loginCtrl.loginForm" ng-submit="loginCtrl.submitForm()">
<p class="spark-margin-top--lg spark-margin-bottom" translate="">Sign In to.</p>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.id
}">
<input class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="UserId" placeholder="Enter User ID..." role="textbox" required="" ng-model="loginCtrl.formData.id" autofocus="">
<span class="spark-label">User ID</span>
</label>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.password
}">
<input type="password" class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="Password" placeholder="What is your password?" role="textbox" required="" ng-model="loginCtrl.formData.password">
<span class="spark-label">Password</span>
<span class="spark-input__addon spark-input__password-toggle">
<i class="spark-input__password-show spark-icon--md spark-icon-password-view"></i>
<i class="spark-input__password-hide spark-icon--md spark-icon-password-hide"></i>
</span>
</label>
<fieldset class="row">
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input ng-pristine ng-untouched ng-valid ng-empty" type="checkbox" name="RememberMe" ng-model="loginCtrl.formData.rememberMe">
<span class="spark-checkbox__box"></span>
<span class="spark-label" translate="">Remember Me</span>
</label>
</fieldset>
<div class="row">
<div class="col-xs-12 spark-margin-top">
<button type="submit" class="spark-btn spark-btn--md spark-btn--primary spark-block--lte-sm spark-margin-bottom--md spark-pull-right--gte-sm" ng-disabled="loginCtrl.formSubmiting" translate="">Sign In</button>
<div class="spark-splash-screen__help-container spark-pull-left--gte-sm">
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('findUserOrPass')">Forgot User ID or Password?</button>
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('firstTimeUser')">First-Time User</button>
</div>
</div>
</div>
</form>
This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;

Try also assigning the ng-model (loginCtrl.formData.id)
From loginCtrl, which I assume is the controller:
document.getElementsByName('UserId')[0].value = 'MyUserId';
formData.id = 'MyUserId';
If you're doing this asynchronously, you may need to $apply:
document.getElementsByName('UserId')[0].value = 'MyUserId';
$scope.$apply(function() {
formData.id = 'MyUserId';
});

This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;

How to use Angular UI Bootstrap DatePicker Popup with ng-repeat

<div class="task-manager_block" ng-controller="ToDoCtrl">
<div class="form_block clearfix">
<form name="addToDo">
<input class="add-input" placeholder="I need to..." type="text" name="inputToDo" ng-model="formTodoText" ng-model-instant ng-minlenght ng-minlength="5" ng-maxlength="40" ng-required="true"/>
<button class="add-btn" ng-click="addTodo()" ng-disabled="! addToDo.inputToDo.$valid "><h2>Add</h2></button>
</form>
</div>
<div class="tasks_block" ng-controller="DatepickerPopupCtrl">
<div class="task_block col-md-3" ng-repeat="todo in todos">
<div class="text_block">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p>{{todo.text}}</p>
</div>
</div>
</div>
</div>
How can I open a single popup that I clicked on because now all of them are instantly opened independently of what I clicked.

This happens due to all the datepickers inside ng-repeat reference the same variable to check open state.
See this.
is-open="popup1.opened"
You will have to manage this state in a separate object.
For example,
In controller declare a empty object
let datePickersStat = {};
then in your HTML, you can use anything as object key as long as it's unique.
is-open="datePickersStat[todo.id]"
Hope that helps.

Ionic not loading elements correctly?

I'm using Ionic right now to develop a simple login page, but for some reason, the code for the header isn't working correctly - wrong alignment and font size - and neither is the code for input forms - they should be full width and when I used stacking labels exactly as any example out there, instead of the labels being on top of the input areas, they would be to the left of the input areas.
This is the code I'm using:
<script src="cordova.js"></script>
<div class="bar bar-header bar-light">
<h1 class="title">Login</h1>
</div>
<ion-content class="login">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="password" ng-model="data.password">
</label>
</div>
<button type="submit" class="button-full button-positive" ng-click="login()">Login</button>
</ion-content>
This is the .scss ( which came with the example ):
.login {
}
This is how it looks for me:

You are missing the <ion-view></ion-view> in your html. It should be something like this in your case:
<ion-view view-title="Login" name="login-view">
<ion-content class="login">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="password" ng-model="data.password">
</label>
</div>
<button type="submit" class="button-full button-positive" ng-click="login()">Login</button>
</ion-content>
</ion-view>

Ionic modal firstFocus not working

I have an Ionic App that that when a modal launches it suppose to focus the first input. which is the input element with an ID of #discount.
this is my view.
<script id="discount.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Add Discount</h1>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input item-stacked-label">
<span class="input-label">Price</span>
<input type="tel" autofocus class="button-large button-block text-center input-lg" id="discount" ng-model="payment.discountPrice" ui-money-mask="2" />
</label>
<br>
<label class="item item-input item-stacked-label">
<span class="input-label">Name</span>
<input type="text" class="button-large button-block input-lg" ng-model="payment.discountName" />
</label>
<br>
<button class="button button-large button-block button-positive" ng-click="submitDiscount()">Apply</button>
<button class="button button-large button-block button-assertive" ng-click="closeModal()">Cancel</button>
</div>
</ion-content>
</ion-modal-view>
this is my controller.
$scope.openDiscountModal = function () {
//cache the modal
$ionicModal.fromTemplateUrl('discount.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true,
backdropClickToClose: false
}).then(function (modal) {
$scope.modal = modal;
$scope.modal.show().then(document.getElementById('discount').focus());
console.log('xxx');
});
};
this works fine in the desktop browser but it doesn't focus on my IOS ionic app.

For iOS, you need to add the following configuration in your config.xml file.
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
Please refer the KeyboardDisplayRequiresUserAction section in this iOS Configuration article.
Bydefault KeyboardDisplayRequiresUserAction is set as true.
After adding the configuration preference, your code will no longer required this code for focusing your first field
then(document.getElementById('discount').focus()
You can simply use
$scope.modal.show()
Because focusFirstInput: true will automatically focus the first field, in your case discount input field.

Button Click event in Angular JS

I am trying to fire a button click event in angular Js but its not happening at all. Neither i am getting any kind of event related error in developer console of Chrome.
Here is the Markup..
<!-- Login Form Here !-->
<div id="login" ng-controller="LoginformController" style="display: none;" class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Login now</h3>
<p>Fill in the form below to get instant access:</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="UserID">User ID</label>
<input type="text" name="UserID" placeholder="User ID..." class="form-first-name form-control" id="UserID">
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="text" name="Password" placeholder="Password..." class="form-last-name form-control" id="Password">
</div>
<button type="submit" class="btn">Login!</button>
<br/>
<button type="button" class="btn-sm btn-link" ng-click="PasswordRecovery()">Forgot Password</button>
</form>
</div>
</div>
and here is the anguar JS code..
var app = angular.module('LoginApp', []);
app.controller('LoginformController', function ($scope) {
$scope.PasswordRecovery = function () {
alert("Clicked 2");
}
});
Please help me to resolve this ..

If I would add
<div ng-controller="UnexistingController"></div>
to your HTML then I would get:
"Error: [ng:areq] Argument 'UnexistingController' is not a function,
got undefined
http://errors.angularjs.org/1.4.3/ng/areq?p0=UnexistingController&p1=not%20a%20function%2C%20got%20undefined
Which makes sense, since I did not add a controller to the module yet. I suspect you made the same mistake.
Argument 'SignupformController' is not a f‌​unction, got undefined
Description
AngularJS often asserts that certain values will be present and truthy
using a helper function. If the assertion fails, this error is thrown.
To fix this problem, make sure that the value the assertion expects is
defined and truthy
.

Works for me, I don't understand why you added style="display: none;, but it's not the problem.
See Plunker.