Develop Reference

angular default drop down value 2 way bound

I have a drop down in Angular that is a 2 way bound FORM control. When the form loads all I want to do is set a default value on the bound value so it displays that value in the drop down. When I change the value in the drop down and print to console I see the binding is correct. However the first time it loads the default value is not displayed in the drop down (not preselected) . In this sample when the form loads "cow" should be the default selected item but it is not working on page load. Please advise what is wrong in the code.
https://stackblitz.com/edit/angular-error-initial

Programmattically assign the value to your FormControl...
ngAfterViewInit(){
this.animalControl.setValue(this.animals[2]);
this.animalControl.markAsTouched();
console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
}
Stackblitz
https://stackblitz.com/edit/angular-error-initial-atr11t?embed=1&file=app/select-hint-error-example.ts
Revision
Use of ngModel with FormControl has been decprecated and is removed from Angular 7... you should start getting use to accessing values from the FormControl.
console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
This has been deprecated for a few reasons. First, developers have
found this pattern confusing. It seems like the actual ngModel
directive is being used, but in fact it's an input/output property
named ngModel on the reactive form directive that simply approximates
(some of) its behavior. Specifically, it allows getting/setting the
value and intercepting value events. However, some of ngModel's other
features - like delaying updates withngModelOptions or exporting the
directive - simply don't work, which has understandably caused some
confusion.
In addition, this pattern mixes template-driven and reactive forms
strategies, which we generally don't recommend because it doesn't take
advantage of the full benefits of either strategy. Setting the value
in the template violates the template-agnostic principles behind
reactive forms, whereas adding a FormControl/FormGroup layer in the
class removes the convenience of defining forms in the template.
To update your code before v7, you'll want to decide whether to stick
with reactive form directives (and get/set values using reactive forms
patterns) or switch over to template-driven directives.

Angular directive - form/input validation and passing arguments/attributes

I'm a bit surprised that I haven't found complete solution to this, as it seems to be a common use case:
I need help with crating custom angular directive. What I have is a form with basic front-end-side validation and messages in <span> which appear on submit.
I have simple form with validation:
jsbin sample
What I want to achieve:
Things like ng-max-length, ng-min-length, ng-pattern, ng-model etc. shouldn't be hard-coded inside of the template, rather passed as arguments from my custom-tag to the inside of directive's template - and assigned to the <input> element. (even fancier would be to assign some of the attributes to input and some other for example inside of label so that directives template can contain not only the input, but a bit bigger part of HTML, including the label)
two kinds of validation - one by highlighting the fields basing on the classes (no problem with that), second one with <span> elements appearing on submit
What problems am I facing?
How to pass the arguments (attributes) from my custom-tag to the input inside of the template?
I have now in one HTML file: formName.inputName.$error.typeOfError; How to achieve that now from the inside of the directive/template? Somehow parameterizing it.
Regarding showing validation messages on submit: Is the variable submitted set when pressing submit button and cleared when resetting the form a good idea or there is a nicer solution to that?
Make the scopes isolated so multiple instances of the directive do not interfere with each other.
Thanks in advance for help.

The docs for creating angular directives don't really give examples but what you need is the scope property defined.
Check the following:
https://jsbin.com/zabuza/edit?html,js,output
Also, be very careful with using input[number], caused me major headache in this example as it's not a normal ng type of directive.
Docs I used:
docs1
docs2

angularjs when i should use a directive

i am working with javascript and angularjs for about a month.
But i'm still not sure, when i should use a directive or not.
Example:
I want to show appointments in a table with the date as tableheader.
On the left of the table i have a button, where i can load the appointments
of the previous week and on the right for the next week.
My first approach would be:
I have a viewmodel/controller which holds the data for the actual week.
Then i add two methods on the controller: loadPreviousWeek, loadNextWeek which get's
the data from a appointmentProvider.
In my view i add a ng-click directive to the buttons which call the functions of the controller.
After i read a bit about directives this would be my second approach:
I have a AppointmentService which holds the actual week. This service
can load the next week and the previous week. Then i create a directive, loadWeek,
which adds the onClick event to the element who uses's it. This onClick
method call's the methods from the appointmentService. And my view directly
binds to the appointmentService througt the controller.
Which approach would be better? Correct me please, if i am completely wrong.
And can you give me some other examples from the practice for directives?
Sincerely,
Cristan

This doesn't sound like a use case for a custom directive to me. Directives are used to link your controllers/scopes to the DOM (remember, all the ng-xy bindings are directives provided by AngularJS). A directive mostly is somehow linked to a scope (and it's controller therefore).
Defining the information which you want to show and changing them based on the user inputs is a typical task for the controller. Do you have any problems implementing the controller or are you considering directives?

I believe a directive could be what what you're looking for, but you may also just want a controller in this situation. The controller handles getting the loadPrevious/next events and uses the service to get the data.
Where you would want to involve the directive, in my understanding, is if you wanted to create an html template that went along with it which can do cool stuff like transclude other elements.
For convenience: https://docs.angularjs.org/guide/directive

angularjs calling Filter twice with ng-repeat

I am new to angularjs and trying to learn concept of filters.But in my case angularjs is calling the filter twice.I was expecting filter to run only once but its running twice. Cant understand why this is happening..
here is my plunker...

If i don't take your question wrong, this is the same question as here
Angularjs uses a 'dirty-check' approach, so it need to call all the filters to see if exists any change. After this it detect that have a change on one variable(the one that you typed) and then it execute all filters again to detect if has other changes.
To be more clear understanding, stackoverflow this question will explain in more detail by expert in angularjs
Here is another plunker same calling filter twice
The first call is from the watchers that are detecting the change. Because there is one then they need to be called again to see if is there news changes because a watcher can make changes.

getting dropdownchecklist working with knockoutJS

I'm trying to get dropdownchecklist jquery plugin working with ko. I've wired up custom binding handler but dropdown won't populate with options. Please check my fiddle: http://jsfiddle.net/amitava82/wMH8J/11/
Appreciate your help. Thanks!

This is because you create dropdown before binding KnockoutJS. How does this dropdown work? It creates additional divs and spans which copy the content of select and create nice looking list. After that bindings are applied and they modify the select (as they should), but dropdown is not updated, because this library is kind of static, i.e. it copies the content of select only at the time of calling.
I've updated your jsFiddle so you can see temporary fix. What I mean is that it works now, the binding is applied before creating dropdown. The only problem is that changing options field in viewModel won't affect the dropdown. What you probably need to do is to use subscribe method. You have to monitor changes to options field and if they occur you have to recreate the dropdown. That's an easy way at least.

#freakish answer will work for most static content, but for anything dynamic using templates, for example if or foreach bindings, or you need to support underlying data updates, such as more checkbox options "suddenly" becoming available, it will not work.
An example of a really simple $.button binding apply which can be used to wrap the more simple jQuery calls. It's a simple matter of adding more members to controls to make them available in bindings.
The case with jQuery Dropdown Check List is a bit tricky however, since you obviously want to use the built in options handler, but you need to run $.dropdownchecklist after the options handler has run, as it creates the DOM elements that jQuery depends on. By wrapping the built in options handler, we are always called in the correct context.
In my experience of usage (our project makes use of about 10-15 custom bindings), you'll average about 10-20 lines of actual JS. If you start ballooning into +100 lines, I find it's a good idea to refactor, and rethink. I hope this helps some :-) I've been using Knockout for a few months now at a major UI implementation project at work, I've really learned alot, and I'm amazed at this stuff.