Home
Search results “Angular ng options selected”
Angular Js  ng-options
 
15:36
How to use Angular js ngOptions for complex objects
Views: 10785 SkilleTech
Angular select options from array
 
07:54
Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-select-options-from-array.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-select-options-from-array-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video, we will discuss, how to get the select list options from an array in the component class, instead of having them hard-coded in the HTML. Step 1 : Create the Department class. Add a TypeScript file to the models folder. Name it department.model.ts. Copy and paste the following code. Notice the Department class has 2 properties - id and name of the department. export class Department { id: number; name: string; } Step 2 : Import the Department class. Include the following import statement in create-employee.component.ts file import { Department } from '../models/department.model'; Step 3 : Include the following array of departments in CreateEmployeeComponent class in create-employee.component.ts file departments: Department[] = [ { id: 1, name: 'Help Desk' }, { id: 2, name: 'HR' }, { id: 3, name: 'IT' }, { id: 4, name: 'Payroll' } ]; Please note : The "Department" type is not required for the application to work, but it adds great value during development. Using it provides us intellisense, error checking and type saftey. For the HTML used in the video, please refer to my blog link below http://csharp-video-tutorials.blogspot.com/2018/01/angular-select-options-from-array.html Code explanation: 1. On the "option" element we are using ngFor structural directive to loop over the array of departments we have in the "departments" property of the component class 2. For each "Department" object in the "departments" array, we get an option. 3. The option value is the department id and the display text is the department name 4. Notice the square brackets around the [value] property. This is property binding in Angular. We discussed property binding in detail in Part 9 of Angular 2 tutorial. If you remove the square brackets the value for each option will be the literal text "dept.id" instead of the department id (1 or 2 or 3 etc.) Property binding in Angular https://www.youtube.com/watch?v=RGYfTx9AAQA&list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6&index=9 5. To display the deprtment name we are using interpolation. We discussed interpolation in Part 8 of Angular 2 tutorial. Interpolation in Angular https://www.youtube.com/watch?v=2FkkAqFWRk8&list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6&index=8 6. Since ngFor is a structural directive there is an asterisk before it. 7. Structural directives modify the DOM, i.e they add or remove the elements from DOM. Adding and removing elements from DOM is different from showing and hiding. We will discuss all these in detail in our upcoming videos. At this point, when we select a department, the respective department id is included in the Angular generated form model. Along the same lines, when we click the "Save" button the respective department id is logged to the console. Please note : It is important that we include the ngFor directive on the element that we want to be repeated. In our case we want an option element for each department we have in the array. So we included the ngFor directive on the option element. If we instead include the ngFor directive on the "div" element that has the bootstrap "form-group" class, we get 4 department dropdownlists. That is one for each department in the array. So it is important we include the ngFor directive on the right element.
Views: 60209 kudvenkat
Angular 5: How to Bind/Get selected value/Set Default  in SelectList
 
08:42
In this tutorial, we will see how to : 1. Bind the data to the select list in Angular 5/4 using ngFor 2. To get the selected value from the dropdown list 3. To set the default value of the dropdown list 4. Call a custom function on the change event of the dropdownlist
Views: 48718 Techie Ocean
Angular bootstrap select list
 
06:51
Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-bootstrap-select-list.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-bootstrap-select-list-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss 1. Working with a select list in Angular Template Driven forms 2. How to have one of the select list option selected by default 3. How to disable select list Let us understand working with a select element in Angular with a simple example. We want to include "Department" select list. For the HTML used in the demo, please refer to my blog using the link below http://csharp-video-tutorials.blogspot.com/2018/01/angular-bootstrap-select-list.html At the moment, we have hard coded the select list options in the HTML. In our next video we will discuss, how to get the select list options from the component class. Notice each option also has a corresponding value. The value is the department id which is what we want to save in the database table when the form is submitted. We will discuss, saving the data to a database table in a later video. At this point, when we select an option, the corresponding option value is included against the "department" property in the Angular auto-generated form model. Also when we click the "Save" button, the "department" property along with the selected option value is logged to the console in browser developer tools. How to have one of the select list option selected by default If we include "selected" attribute on one of the options of the select list, we expect that option to be selected by default when the form initially loads, but when the form reloads, the respective option will not be selected. If you remove the "ngModel" directive from the select list, then the the option gets selected as expected. In Angular, we use "ngModel" directive for two-way data binding. So the moment we put it back in place the "selected" attribute does not work. To make it work include "department" property in the component class and initialise it with one of the option value which you want to have selected by default. In our case, we want the "IT" option to be selected by default. The "IT option value is "3". So, I have initialised "department" property with a value of '3' department = '3' At this point you will have "IT" option selected by default when the form loads. Now, even if we remove the "selected" attribute from the "IT" option, it is still selected by default when the form loads. This is because of the two-way data binding that we get with "ngModel" directive. How to disable a select list : To disable a select element, use the disabled attribute Another important point to keep in mind. By default, disabled form controls are not included in the Angular auto generated form model. Since, the "department" select element is disabled, it will not be included in the Angular generated form model. In our form, we do not want the select element to be disabled, so please remove the disabled attribute. Also, we do not want any option to be selected by default, so remove the "department" property from the component class. In our next video, we will discuss, how to get the select list options from the component class, instead of having them hard-coded in the HTML.
Views: 38200 kudvenkat
How To Set The Value Property In AngularJS ng-options - initial selected value of a select element
 
02:22
............................ Please visit http://technomark.in/How-To-Set-The-Value-Property-In-AngularJS-ng-options.aspx for more information. Here we explain how to Set The Value Property for ng-options. In latest version of AngularJS, this can be achieved by using track by expression. We can set the actual value for the value attribute of select element. Let ArrayData be the datasource and ScopeObject is the scope object attached. On ArrayData, the Value Field is DisplayID and Text Field is DisplayText. Then inside select statement, we can use ng-option as follows. ng-options = " data.DisplayText for data in ScopeObject.ArrayData track by data.DisplayID" Here we have used the track by data.DisplayID. By this way we can Set The Value Property for ng-options. In this video, we have explained about following thing How To Set The Value Property In AngularJS ng-options - initial selected value of a select element Complete steps is described in this video regarding How To Set The Value Property In AngularJS ng-options - initial selected value of a select element If you got any clarification on this, please write it on Comment section. We will definitely update you back.
Views: 5779 Admin Technomark
Angular Forms Tutorial - 10 - Select control validation
 
07:25
Support - https://www.paypal.me/Codevolution Facebook - https://www.facebook.com/codevolutionweb Github - https://github.com/gopinav Angular | Angular Forms | Angular Forms Tutorial | Template Driven Forms | Select control validation
Views: 30908 Codevolution
Angular.JS: Solving the "initial selection" problem with select elements (& many other tips)
 
40:28
In this video, Mohamed Meligy explores a very common problem that people face when using select elements with Angular.JS, when the select element does not select the model property its supposed to. It also explains several other tips around using the select and ng-options directives as well.
Views: 23033 Meligy
Angular - How to get the selected dropdown value
 
03:45
Download the example code here: https://github.com/frontendvideo/angular/tree/master/templates-and-data/option-element-get-selected-value
Views: 14210 Front End Video
Angular Material Select
 
12:03
Step by step beginner's tutorial on how to use Angular Material Select. Show a pretty dropdown menu of options to your user with the Angular Material Select component. Please LIKE and SUB if this brought value to you. COMMENT below with any thoughts/questions. Prerequisite (Angular Material Basics): https://www.youtube.com/watch?v=nM-WaLClJiw Prerequisite (Getting Started With Angular): https://www.youtube.com/watch?v=15xqFp8tqU4
Views: 3170 Jami Bot
23  The UI Select Component
 
07:54
The UI Select Component
Views: 7158 Bee Kalliger
Angular CLI ng new options
 
09:39
In this video we will discuss some of the common options that we can use with ng new command. Flag Type Default Alias --dry-run Boolean false -d Run through without making any changes. Just reports the files that will be created --skip-install Boolean false -si Skip installing packages --skip-tests Boolean false -st Skip creating tests --inline-style Boolean false -is Use inline styles when generating the new application --inline-template Boolean false -it Use inline templates when generating the new project Text version of the video http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-ng-new-options.html Slides http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-ng-new-options-slides.html Angular CLI Text articles & Slides http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-tutorial-for-beginners.html Angular CLI Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 27747 kudvenkat
Angular cli ng serve options
 
09:36
In this video we will discuss some of the common options that we can use with ng serve command. To see the list of all options that we can use with "ng serve" command use --help option ng serve --help The following page also shows all the options that can be used with ng serve https://github.com/angular/angular-cli/wiki/serve The following command, builds and launches the application in your default browser. ng serve --open Many of our channel subscribers have sent me emails saying their application is using Internet Explorer, but they want to use Google chrome instead. So thier question is how to change my default browser. Well that's simple and it really depends on the operating system you have. For example, on a Windows 7 operatin system here are the steps to change your default browser. 1. Click on the Windows Start Button and in the "Search programs and files" text box type: Control 2. Control Panel would appear in the list. Click on it. 3. In the "Control Panel" window, click on "Default Programs" 4. In the "Default Programs" window, click on "Set your default programs" 5. In the list of programs that appear, select the "Browser" that you want to be the default browser and then click on the link that says "Set this program as default" That's it. At this point, execute "ng serve --open" command and you will have your application launched in your specified default browser. Instead of using the full option name --open, you can also use it's alias -o The following table shows the common options, alias, default value and their purpose Option Alias Default Purpose --watch -w true Run build when files change --live-reload -lr true Whether to reload the page on change --open -o false Opens the url in default browser --port -p 4200 The port on which the server is listening --extract-css -ec Extract css from global styles onto css files instead of js ones Text version of the video http://csharp-video-tutorials.blogspot.com/2017/11/angular-cli-ng-serve-options.html Slides http://csharp-video-tutorials.blogspot.com/2017/11/angular-cli-ng-serve-options-slides.html Angular CLI Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CLI Text articles & Slides http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-tutorial-for-beginners.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 17130 kudvenkat
Multiselect Dropdown in Angular
 
10:42
this is multiselet dropdown. we can implement angular 2,4,5 6.
Views: 10475 AngularTech
Bind Select Option DropDown List in Angular 4 and 5 Using Visual Studio Code
 
04:12
Bind Select Option (DropDown List) in Angular 4 and 5 Using Visual Studio Code; Angular 4 and 5 DropDown List; Angular 4 and 5 Bind Select Option
Views: 24579 Anil Singh
bind multiple arrays into dropdown html select option Angular js 1.7.7
 
08:10
#arraysangularjs #angularjs #dropdownangularjs Using angular js ng-repeat binding multiple arrays into select option html element dropdown control
AngularJS Set selected option Select DropDownList | angular 6 ng selected
 
02:33
AngularJS Set selected option Select DropDownList | angular 6 ng selected angularjs set selected option from controller,set selected value of dropdown in angular 6,angular 6 set dropdown value dynamically,angular 6 dropdown selected value,angular 6 select default value,angular 6 ng-selected example,how to set default value in dropdownlist in angular 6,how to get selected value from dropdownlist in angular 6 More Information ----------------- My website : http://infinityknow.com/ Free Download : http://pakainfo.com/ Like My Page On Facebook - https://www.facebook.com/live24ucom/ Follow Me On Twitter - https://twitter.com/Tiya_bedi Google Plus - https://plus.google.com/u/0/116420058288024485494
Views: 825 infinite knowledge
Angular Material Select Option
 
04:15
Angular Material Select Option.mat-select is a form control for selecting a value from a set of options, similar to the native select element. You can read more about selects in the Material Design spec. It is designed to work inside of a mat-form-field element. To add options to the select, add mat-option elements to the mat-select. Each mat-option has a value property that can be used to set the value that will be selected if the user chooses this option. The content of the mat-option is what will be shown to the user.
Views: 2282 AngularAvengers
Best and simple way to implement angularjs chosen select option.
 
08:06
I am going to explain about select dropdown in AngularJS and asp.net MVC (server-side) application and data access from database using business logic. Best and simple way . useful angular and jquery chosen link. bootstrap.css jquery-1.10.2.js bootstrap-chosen.css angular.js angular-chosen.min.js chosen.jquery.min.js
Views: 45 OfficeSolution
Angular 6 Basics 11 - Looping with ngFor
 
10:47
Access the full course here: https://javabrains.io/courses/angular_basics In this unit, we'll look at the ways you can customize your view by using the directives and template interpolation features of the Angular framework. We'll start by examining the directive `ngFor` that lets you loop over an array in the view. Angular 6 Basics - Learn how to create Angular applications from scratch. Understand the Angular framework and learn how to use the features of the framework to create components and services. Use modules to organize your code. Build applications that call REST APIs and fetch data from a server. Implement routing to show multiple views with multiple URLs. This course requires no previous knowledge of Angular or AngularJS.
Views: 44459 Java Brains
Angular select list validation
 
05:06
In this video, we will discuss Dropdown list validation in Angular with example. Example : We want to make "Department" Dropdownlist a required field. If a department is not selected, we want to validate and display "Department is required" validation error message. As soon as a department is checked, the validation error message should disappear. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/02/angular-select-list-validation.html Slides http://csharp-video-tutorials.blogspot.com/2018/02/angular-select-list-validation-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 20824 kudvenkat
Custom Select/dropdown using Angular directive part 1
 
05:01
This video is about creating simple select/dropdownusing angular directive
Views: 6149 atul verma
Angular value vs ngvalue
 
08:59
In this video we will discuss how to validate a select element if it has a custom option like "Please Select" etc. Along the way we also discuss the difference between value and ngValue in Angular. If you use value, null is treated as a string and not as a null. Hence the required validation does not work. If you just want the selected value as a string then use value property. If you want the selected object from the SELECT element, then use ngValue. Use the disabled attribute, if you do not want the user to be able to select the first default option. The built-in required validator will only work with the SELECT element, if the default option value is null. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/02/angular-value-vs-ngvalue.html Slides http://csharp-video-tutorials.blogspot.com/2018/02/angular-value-vs-ngvalue-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 17253 kudvenkat
Ng Options angular Js
 
05:52
Please watch: "How to integrate Paypal into ASP.Net checkout paypal asp.net mvc" https://www.youtube.com/watch?v=BuIixWHD7Vs -~-~~-~~~-~~-~- Ng Options angular Js For more interesting updates please subscribe my Channel youtube channel : https://www.youtube.com/c/aspdotnetmvc facebook link : https://www.facebook.com/dotnetexperts website link : http://aspdotnetnaresh.blogspot.in website link :https://nareshtechnologiesmvc.blogspot.in
Views: 131 Aspdotnet MVC
ng hide and ng show in AngularJS
 
06:38
In this video we will discuss ng-hide and ng-show directives in Angular with examples ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us understand this with an example When Hide Salary checkbox is checked, the Salary column should be hidden, when it is unchecked the Salary column should be unhidden Script.js : The controller function builds the model var app = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { name: "Ben", gender: "Male", city: "London", salary: 55000 }, { name: "Sara", gender: "Female", city: "Chennai", salary: 68000 }, { name: "Mark", gender: "Male", city: "Chicago", salary: 57000 }, { name: "Pam", gender: "Female", city: "London", salary: 53000 }, { name: "Todd", gender: "Male", city: "Chennai", salary: 60000 } ]; $scope.employees = employees; }); HtmlPage1.html : Notice ng-model directive on the checkbox is set to hideSalary. hideSalary variable is then used as the value for ng-hide directive on the th and td elements that displays Salary. When the page is first loaded, hideSalary variable will be undefined which evaluates to false, as a result Salary column will be visible. When the checkbox is checked, hideSalary variable will be attached to the $scope object and true value is stored in it. This value is then used by the ng-hide directive to hide the salary td and it's th element. When the checkbox is unchecked, false value is stored in the hideSalary variable, which is then used by the ng-hide directive to display the Salary column. [!DOCTYPE html] [html xmlns="http://www.w3.org/1999/xhtml"] [head] [title][/title] [script src="Scripts/angular.min.js"][/script] [script src="Scripts/Script.js"][/script] [link href="Styles.css" rel="stylesheet" /] [/head] [body ng-app="myModule"] [div ng-controller="myController"] [input type="checkbox" ng-model="hideSalary" /]Hide Salary [br /][br /] [table] [thead] [tr] [th]Name[/th] [th]Gender[/th] [th]City[/th] [th ng-hide="hideSalary"]Salary[/th] [/tr] [/thead] [tbody] [tr ng-repeat="employee in employees"] [td] {{ employee.name }} [/td] [td] {{ employee.gender}} [/td] [td] {{ employee.city}} [/td] [td ng-hide="hideSalary"] {{ employee.salary }} [/td] [/tr] [/tbody] [/table] [/div] [/body] [/html] The following example masks and unmasks the Salary column values using ng-hide and ng-show directives, depending on the checked status of the Hide Salary checkbox. [!DOCTYPE html] [html xmlns="http://www.w3.org/1999/xhtml"] [head] [title][/title] [script src="Scripts/angular.min.js"][/script] [script src="Scripts/Script.js"][/script] [link href="Styles.css" rel="stylesheet" /] [/head] [body ng-app="myModule"] [div ng-controller="myController"] [input type="checkbox" ng-model="hideSalary" /]Hide Salary [br /][br /] [table] [thead] [tr] [th]Name[/th] [th]Gender[/th] [th]City[/th] [th ng-hide="hideSalary"]Salary[/th] [th ng-show="hideSalary"]Salary[/th] [/tr] [/thead] [tbody] [tr ng-repeat="employee in employees"] [td] {{ employee.name }} [/td] [td] {{ employee.gender}} [/td] [td] {{ employee.city}} [/td] [td ng-hide="hideSalary"] {{ employee.salary }} [/td] [td ng-show="hideSalary"] ##### [/td] [/tr] [/tbody] [/table] [/div] [/body] [/html] Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/11/ng-hide-and-ng-show-in-angularjs.html
Views: 185436 kudvenkat
Angularjs Tutorials for Beginners|Learn Basics.Video 19.ng-select directive.
 
03:59
AngularJS tutorial for beginners Learn Angularjs Online Most simple way. http://learnandmastercoding.blogspot.in/p/online-angularjs.html Website: http://learnandmastercoding.blogspot.in Website: http://www.stepbystepdevelopment.online http://learnandmastercoding.blogspot.in/p/angu.html In this video we demonstrate the use of ng-select. With AngularJS ng-select we create dropdown lists based on items in an array, or an object 1. Create ng-select with ng-repeat. 2. Create ng-select with ng-options . 3. Define default values. 4. Define ng-init to define initial values. 5. Show images as per dropdown list. 6. Show states within country in dropdown list. Blogs: http://learnbasicsangularjs.blogspot.in/ Blogs: http://angularjsappdevelopment.blogspot.in/
Sorting data in AngularJS
 
08:32
angularjs order data angularjs orderby filter example angularjs ng-repeat orderby example angularjs filter orderby date angularjs orderby reverse angularjs orderby ascending angularjs filter orderby descending Sorting data in AngularJS In this video we will discuss how to implement sorting in AngularJS. This is continuation to Part 8. Please watch Part 8 from AngularJS tutorial for beginners before proceeding. To sort the data in Angular 1. Use orderBy filter {{ orderBy_expression | orderBy : expression : reverse}} Example : ng-repeat="employee in employees | orderBy:'salary':false" 2. To sort in ascending order, set reverse to false 3. To sort in descending order, set reverse to true 4. You can also use + and - to sort in ascending and descending order respectively Example : ng-repeat="employee in employees | orderBy:'+salary'" Let us understand sorting data with an example. The dropdownlist shows the columns and the direction we want to sort When a dropdownlist item is selected, the table data should be sorted by the selected column Script.js : The controller function builds the model. Also sortColumn property is added to the $scope object. Notice sortColumn property is initialized to name. This ensures that the data is sorted by name column in ascending order, when the form first loads. var app = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { name: "Ben", dateOfBirth : new Date("November 23, 1980"), gender: "Male", salary: 55000 }, { name: "Sara", dateOfBirth: new Date("May 05, 1970"), gender: "Female", salary: 68000 }, { name: "Mark", dateOfBirth: new Date("August 15, 1974"), gender: "Male", salary: 57000 }, { name: "Pam", dateOfBirth: new Date("October 27, 1979"), gender: "Female", salary: 53000 }, { name: "Todd", dateOfBirth: new Date("December 30, 1983"), gender: "Male", salary: 60000 } ]; $scope.employees = employees; $scope.sortColumn = "name"; }); HtmlPage1.html : The select element, has the list of columns by which the data should be sorted. + and - symbols control the sort direction. When the form initially loads notice that the data is sorted by name column in ascending order, and name option is automatically selected in the select element. Notice the orderBy filter is using the sortColumn property that is attached to the $scope object. When the selection in the select element changes, the sortColumn property of the $scope object will be updated automatically with the selected value, and in turn the updated value is used by the orderBy filter to sort the data. [!DOCTYPE html] [html xmlns="http://www.w3.org/1999/xhtml"] [head] [title][/title] [script src="Scripts/angular.min.js"][/script] [script src="Scripts/Script.js"][/script] [link href="Styles.css" rel="stylesheet" /] [/head] [body ng-app="myModule"] [div ng-controller="myController"] Sort By : [select ng-model="sortColumn"] [option value="name"]Name ASC[/option] [option value="+dateOfBirth"]Date of Birth ASC[/option] [option value="+gender"]Gender ASC[/option] [option value="-salary"]Salary DESC[/option] [/select] [br /][br /] [table] [thead] [tr] [th]Name[/th] [th]Date of Birth[/th] [th]Gender[/th] [th]Salary[/th] [/tr] [/thead] [tbody] [tr ng-repeat="employee in employees | orderBy:sortColumn"] [td] {{ employee.name }} [/td] [td] {{ employee.dateOfBirth | date:"dd/MM/yyyy" }} [/td] [td] {{ employee.gender }} [/td] [td] {{ employee.salary }} [/td] [/tr] [/tbody] [/table] [/div] [/body] [/html] Styles.css : CSS styles to make the form look pretty. body { font-family: Arial; } table { border-collapse: collapse; } td { border: 1px solid black; padding: 5px; } th { border: 1px solid black; padding: 5px; text-align: left; } Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/11/sorting-data-in-angularjs.html
Views: 276612 kudvenkat
Search Select component demo (Angular / Material)
 
16:55
After needing a searchable-select control on various Angular projects, we've created a reusable, open source component. It is based on Angular Material, and offers working features today. This is a demo and explanation.
How to get the value of an HTML dropdown with Angular - Kevin Chisholm Video
 
04:02
https://blog.kevinchisholm.com In this video, I’ll explain how to get the value of the selected drop down with Angular. When working with Angular, you may find that at times you need to act upon the selection a user makes from a drop down box. Technically a drop down box is what’s called a select element. And here in this page I’ve got a select element, otherwise known as a drop down box, with the five days of the work week. So, when I select one of the days, the result of that selection is shown in the page. If I choose Monday I see Monday, if I choose Tuesday I see Tuesday, and so forth. So, the main thing to keep in mind here is that whatever the user selects, we’re acting upon that value. In this case we’re showing it in the page, but we may want to do something more sophisticated. Let’s take a look at the code and see how this all works. So here we have the markup for the exact page that we just looked at. And the select element is the drop down box that you see. Now when the user makes a selection, they are choosing one of these option elements. And each time they choose an option element, the change event fires on the select element. When the change event fires, we’re executing the select change handler method on our component, and passing it the event object. We’ll revisit this in just a minute. Down here, we’re showing the value of the selected day property. So we just know that on our component there’s a property called selected day, and when you saw me making a change here in the drop down box, right here, the selected day property is what’s being updated here in that page. So let’s look at our component. So here in the component, we have this selected day property and it’s a string, so that’s the property that we’re updating whenever we make a change to the drop down box. Here we have the select change handler method, and that method takes an event object as its sole argument. An event object is something that the browser provides to an event handler, which allows you to drill down, act upon different parts of the event. But just know that when we get this event object, it has a target property. The target property is the element upon which the user acted, so in this case it’s the select element, and the value is the value that’s produced by that other value of that element. So in this case, when the user makes change to the select element, whatever option they chose, that’s the value. If they chose Monday, the value’s Monday. If they chose Tuesday, the value is Tuesday, and so forth. So we’re setting that to this .selectedday, and this .selectedday is the selectedday property. We just have to refer to it as this .selectedday, because we’re inside of an event handler. But the main thing to know is that when this event handler executes, it takes a look at this even object, it takes a look at its target property, and then it takes a look at that target property’s value property and assigns it to the selected day property of this component. And what that all translates to is that any time the user makes a change here, the change event fires, our event handler is executed, and its passed the event object, and whichever option they chose, the value that they chose will wind up being the target value property and that’s passed to selected day. Selected day is down here, so what happens is we see the result of the user’s action here in the page. If you found this video helpful, you can subscribe to my channel by clicking the red "Subscribe" button right under the video. You can also take a look at my blog, where there are many articles and tutorials about web development. Thanks very much for watching.
Views: 3629 Kevin Chisholm
ng option in Angular Js (Hindi) - part 1
 
09:02
my more videos - events in angular 2 - https://www.youtube.com/watch?v=YqLVL... *ngfor in angular 2 - https://www.youtube.com/watch?v=SZ5F7... components in angular 2- https://www.youtube.com/watch? v=fGiTKam8MGk quick start of angular 2 - https://www.youtube.com/watch?v=iWnPG... for angular js videos - https://www.youtube.com/playlist?list... https://www.youtube.com/watch?v=NEBh4... https://youtu.be/0jU0LpsoNcA https://www.youtube.com/watch?v=AIb1_... myblog - https://shashwatyoutube.blogspot.in/ Part 1 - Javascript Hoisting & Scope Variable Problem in Hindi by New Technology Hackings 3:56 More part 2 - JavaScript Functions Primer in Hindi by New Technology Hackings https://www.youtube.com/watch?v=d0dAcm6q-BQ&t=20s&index=1&list=PLZwzjvTVIo_tnX2RZdNSlXHS7wf0Gl02g
Views: 528 ng- Course
Multiselect dropdown with checkbox in angularjs
 
39:05
Today I am going to explain about multiselect dropdown with checkboxes in AngularJS and asp.net MVC (server-side) application. Here in this example, I have used an angular directive angularjs-dropdown-multiselect, this directive gives us a Bootstrap Dropdown with the power of AngularJS directives. It's very easy to implement and has lots of features. Visit: http://www.dotnetawesome.com/2015/12/multiselect-dropdown-with-checkbox-in-angularjs.html
Views: 45120 sourav mondal
Angular radio button checked by default
 
04:59
In this video we will discuss 1. How to have a radio button checked by default 2. How to disable a radio button If you need the code samples used in the demo, you may copy them from our blog using the link below. http://csharp-video-tutorials.blogspot.com/2018/01/angular-radio-button-checked-by-default.html If we include checked attribute on a radio button, we expect that radio button to be checked by default when the form initially loads. But you will discover that is not the case. In the following example, we have included "checked" attribute on "Male" radio button, but when the form is displayed it is not checked. [input type="radio" name="gender" value="male" [(ngModel)]="gender" checked] However, if you remove the "ngModel" directive from the radio button, then it gets checked as expected. Notice the "ngModel" directive is removed from the radio button. [input type="radio" name="gender" value="male" checked] With Angular Template Driven forms, we use "ngModel" directive for two-way data binding. So the moment we put it back in place the "checked" attribute does not work. To make it work include "gender" property in the component class and initialise to the value of the radio button that you want to have checked by default. In our case, let us say, we want the "Male" radio button to be checked by default. To achieve this include "gender" property initialised to value of "male" in the component class as shown below. gender = 'male'; At this point you will have "Male" radio button checked by default when the form loads. Now, even if we remove the "checked" attribute from the "Male" radio button it is still checked by default when the form loads. This is because of the two-way data binding that we get with "ngModel" directive. For our form we do not want any radio button to be checked by default, so remove the "checked" attribute and the "gender" property from the component class. How to disable a radio button : To disable a radio button, use the disabled attribute on that radio button. "Male" radio button in this case will be disabled when the form initially loads. [input type="radio" name="gender" value="male" [(ngModel)]="gender" disabled] Another important point to keep in mind. By default, disabled form controls are not included in the Angular auto generated form model. Since, the "Male" radio button is disabled, the gender property will not be included in the Angular generated form model. In our form, we do not want any radio button to be disabled, so please remove the disabled attribute. In our next video, we will discuss working with CheckBox control in Angular Template Driven forms. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-radio-button-checked-by-default.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-radio-button-checked-by-default_2.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 33284 kudvenkat
Fixing ng-repeat and ng-options issue
 
00:16
Result of fixing ng-repeat and ng-options issue. Average is about 400ms (when not recording video). See post: www.derrick-mar.com/rails_blog/under_the_hood_posts/ng_options
Views: 156 Derrick Mar
ng-options in angular (hindi) - part 2
 
10:03
my more videos - events in angular 2 - https://www.youtube.com/watch?v=YqLVL... *ngfor in angular 2 - https://www.youtube.com/watch?v=SZ5F7... components in angular 2- https://www.youtube.com/watch? v=fGiTKam8MGk quick start of angular 2 - https://www.youtube.com/watch?v=iWnPG... for angular js videos - https://www.youtube.com/playlist?list... https://www.youtube.com/watch?v=NEBh4... https://youtu.be/0jU0LpsoNcA https://www.youtube.com/watch?v=AIb1_... myblog - https://shashwatyoutube.blogspot.in/ Part 1 - Javascript Hoisting & Scope Variable Problem in Hindi by New Technology Hackings 3:56 More
Views: 263 ng- Course
Highlight a selected row in ng-repeat (enable arrow selection)
 
10:42
This video explains how to implement row selection in ng-repeat for angular js applications. It also shows how you can use arrows to change the row selected. Tutorial:http://code.ciphertrick.com/2015/03/15/change-row-selection-using-arrows-in-ng-repeat/ Demo: http://code.ciphertrick.com/demo/arrow-selector-ng-repeat/ Please watch at-least at 480p
Views: 10630 Rahil Shaikh
04 Forms in AngularJS - 010 radio buttons and ng value
 
05:25
Forms in AngularJS Radio buttons and ng value
Views: 5738 Rankit Ranjan
AngularJS ng repeat directive
 
11:04
angularjs ng-repeat example ng-repeat simple example ng-repeat simple array angularjs ng repeat nested array angularjs ng repeat index example In this video we will discuss 1. ng-repeat directive in Angular 2. Nesting ng-repeat with an example ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we want to do. 1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee Firstname Lastname Gender Salary This can be achieved very easily using ng-repeat directive. HtmlPage1.html : In the view, we are using ng-repeat directive which loops thru each employee in employees array. For each employee, we a get a table row, and in each table cell of the table row, the respective employee details (Firstname, Lastname, Gender, Salary) are retrieved using the angular binding expression. Nested ng-repeat example : The model contains an array of countries, and each country has an array of cities. The view must display cities nested under their respective country. Finding the index of an item in the collection : To find the index of an item in the collection use $index property To get the index of the parent element Use $parent.$index or Use ng-init="parentIndex = $index" Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/11/angularjs-ng-repeat-directive.html
Views: 380116 kudvenkat
Angular JS: ng-repeat and ng-options performance problem
 
00:25
ng-repeat and ng-options performance problem for one of my webpages. See post: www.derrick-mar.com/rails_blog/under_the_hood_posts/ng_options
Views: 1125 Derrick Mar
Thrust - UI Select demo
 
00:23
Demos a new UI component which will feature in Thrust 2016's options screen Inspired by Angular Material Design
Views: 116 hayesmaker
Bootstrap checkbox in angular
 
06:16
In this video we will discuss 1 Working with a checkbox control in Angular Template Driven forms 2. How to have a checkbox checked by default 3. How to disable a checkbox Working with a checkbox in Angular is very similar to working with a radio button. We want to include "Is Active" checkbox in the Create Employee form as shown below. When we check the checkbox, "isActive" property should reflect in the Angular generated for model. Also, when we click the "Save" button we want the "isActive" property value to be logged to the console. To achieve this all you have to do is include the following HTML in create-employee.component.html file. Please replace [ with LESSTHAN symbol and ] with GREATERTHAN symbol [div class="form-group"] [div class="form-control"] [label class="checkbox-inline"] [input type="checkbox" name="isActive" [(ngModel)]="isActive"]Is Active [/label] [/div] [/div] If we include "checked" attribute on a checkbox, we expect checkbox to be checked by default when the form initially loads. But you will discover that is not the case. [input type="checkbox" name="isActive" [(ngModel)]="isActive" checked]Is Active However, if you remove the "ngModel" directive from the checbox, then it gets checked as expected. Notice the "ngModel" directive is removed from the checkbox. [input type="checkbox" name="isActive" checked]Is Active With Angular Template Driven forms, we use "ngModel" directive for two-way data binding. So the moment we put it back in place the "checked" attribute does not work. To make it work include "isActive" property in the component class and initialise it to true. isActive = true; At this point you will have "IsActive" checkbox checked by default when the form loads. Now, even if we remove the "checked" attribute from the checkbox it is still checked by default when the form loads. This is because of the two-way data binding that we get with "ngModel" directive. For our form we do not want the checkbox to be checked by default, so remove the "checked" attribute and the "isActive" property from the component class. How to disable a checkbox : To disable a checkbox, use the disabled attribute [input type="checkbox" name="isActive" [(ngModel)]="isActive" disabled]Is Active Another important point to keep in mind. By default, disabled form controls are not included in the Angular auto generated form model. Since, the "Is Active" checkbox is disabled, it will not be included in the Angular generated form model. In our form, we do not want the checkbox to be disabled, so please remove the disabled attribute. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/bootstrap-checkbox-in-angular.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/bootstrap-checkbox-in-angular-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 33812 kudvenkat
AngularJS For Everyone Tutorial #2 - Repeating Over Data With ng-repeat
 
05:58
Here we repeat over an array of data and an object using ng-repeat. Subscribe for more free tutorials https://goo.gl/6ljoFc, more Angular Tutorials: https://goo.gl/vFi0CQ Support Free Tutorials https://www.leveluptutorials.com/store/ The best shared web hosting http://www.bluehost.com/track/leveluptutorials/ Subscribe to Level Up Pro for extra features! https://www.leveluptutorials.com/store/products/pro Subscribe to the Level Up Newsletter http://eepurl.com/AWjGz To Support Level Up Tuts: http://leveluptuts.com/donations Simple cloud hosting, built for developers.: https://www.digitalocean.com/?refcode=67357174b09e HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Views: 29443 LevelUpTuts
Class binding in angular 2
 
11:05
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/06/class-binding-in-angular-2.html Slides http://csharp-video-tutorials.blogspot.com/2017/06/class-binding-in-angular-2_28.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss CSS Class binding in Angular with examples. For the demos in this video, we will use same example we have been working with so far in this video series. In styles.css file include the following 3 CSS classes. If you recollect styles.css is already referenced in our host page - index.html. .boldClass{ font-weight:bold; } .italicsClass{ font-style:italic; } .colorClass{ color:red; } In app.component.ts, include a button element as shown below. Notice we have set the class attribute of the button element to 'colorClass'. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass']My Button[/button] ` }) export class AppComponent { } At this point, run the application and notice that the 'colorClass' is added to the button element as expected. Replace all the existing css classes with one or more classes Modify the code in app.component.ts as shown below. We have introduced a property 'classesToApply' in AppComponent class We have also specified class binding for the button element. The word 'class' is in a pair of square brackets and it is binded to the property 'classesToApply' This will replace the existing css classes of the button with classes specified in the class binding import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass' [class]='classesToApply']My Button[/button] ` }) export class AppComponent { classesToApply: string = 'italicsClass boldClass'; } Run the application and notice 'colorClass' is removed and these classes (italicsClass & boldClass) are added. Adding or removing a single class : To add or remove a single class, include the prefix 'class' in a pair of square brackets, followed by a DOT and then the name of the class that you want to add or remove. The following example adds boldClass to the button element. Notice it does not remove the existing colorClass already added using the class attribute. If you change applyBoldClass property to false or remove the property altogether from the AppComponent class, css class boldClass is not added to the button element. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass' [class.boldClass]='applyBoldClass']My Button[/button] ` }) export class AppComponent { applyBoldClass: boolean = true; } With class binding we can also use ! symbol. Notice in the example below applyBoldClass is set to false. Since we have used ! in the class binding the class is added as expected. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass' [class.boldClass]='!applyBoldClass']My Button[/button] ` }) export class AppComponent { applyBoldClass: boolean = false; } You can also removed an existing class that is already applied. Consider the following example. Notice we have 3 classes (colorClass, boldClass & italicsClass) added to the button element using the class attribute. The class binding removes the boldClass. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [button class='colorClass boldClass italicsClass' [class.boldClass]='applyBoldClass']My Button[/button] ` }) export class AppComponent { applyBoldClass: boolean = false; }
Views: 109312 kudvenkat
AngularJS Tutorial #7 -  ng-repeat directive
 
04:25
Hey gang, in this AngularJS tutorial, I'll be showing you a cool little directive called ng-repeat. Ng-repeat lets us cycle through our data, and output the data using a series of HTML elements. ----- COURSE LINKS: + Source files on GitHub - https://github.com/iamshaunjp/angular-js-playlist + Atom text editor - https://atom.io/ --------------------------------------------------------------------------------------------- You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage... ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ============ CSS for Beginners Playlist ============= https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 24701 The Net Ninja
Angular multi select drop down
 
03:44
Recorded with https://screencast-o-matic.com
Custom Select/dropdown using Angular directive part 2
 
03:13
Second part of creating simple select/dropdownusing angular directive
Views: 2004 atul verma
html select with restful data in angular
 
03:40
https://happilyblogging.wordpress.com/2017/09/15/html-select-with-restful-data-in-angular/
Views: 222 greenhorn