angular-ngmodel | 易学教程

Angular 2 NgModel doesn't work

阅读更多关于 Angular 2 NgModel doesn't work

问题 I'm starting my transition from Angular 1 to Angular 2. I tried to do simple things first so I wrote a component: import {Component} from 'angular2/core'; import {NgModel} from 'angular2/common'; @Component({ selector: 'app', template: ` <div> <div>Value is {{ value }}</div> <input type="text" [(ngModel)]="value" /> </div> `, directives: [NgModel] }) export class App { value: string; }; <!DOCTYPE html> <html> <head> <title>Angular2</title> </head> <body> <app></app> <script src="./js/bundle

Displaying ngModel value for mat-select

阅读更多关于 Displaying ngModel value for mat-select

问题 I am using Angular Material Select to display holidays. When the user selects a holiday, I would like to display the date instead of the holiday name. For example, if the user selects "Christmas", I want the selected value to should show "December 25" <mat-form-field> <mat-select [(ngModel)]="selectedHoliday" placeholder="Select A Holiday" (change)="eventSelection($event.value)"> <mat-option *ngFor="let holiday of holidays" [value]="holiday">{{ holiday.name }}</mat-option> </mat-select> </mat

How to $setdirty to a single input

阅读更多关于 How to $setdirty to a single input

问题 I've got a little problem. I want to set to dirty a single input, I mean, because when I give a value automatically it stays in pristine class, doesn't change, and doesn't save the new value. If I edit it, it works and change the class. I want to cancel that pristine class. If anyone know please let me know. <form class="form-horizontal" ng-repeat="studiant in studiants" name="form" id="form"> <input type="hidden" name="id" value="{{studiant.studiant_id}}" class="form-control" disabled> <div

Angularjs directive add directives as attribute and bind them dynamically

阅读更多关于 Angularjs directive add directives as attribute and bind them dynamically

问题 Hi i am working on directive where i need to edit DOM add ng-src attribute and a model to it. This is my DOM <edit-component> <img src="images/logo.png" title="Hearty Wear" /> </edit-component> I need the result DOM be `<div> <img src="images/logo.png" title="Hearty Wear" ng-src={{myModel}} /> </div> ` Such that when i update myModel with data the image should be updated UPDATE sam.directive('editComponent', function() { return { restrict: 'EA', transclude: true, replace: true, templateUrl:

How to update value of ng-model with the expression in html part

阅读更多关于 How to update value of ng-model with the expression in html part

问题 Why value of the ng-model is not updated with the expression. Before ng-model is defined value get updated Value will be updated as soon as phase2 or phase3 changes <input type="text" name="phase1" value="{{phase2 - phase3}}" ></input> Value will not be updated <input type="text" name="phase1" value="{{phase2 - phase3}}" ng-model="phase1"></input> So I think of writing a directive which will evaluate the expression inside the directive and updated the output to model, Here is html it will

(ngModelChange) does not fire while remove all values or paste values

阅读更多关于 (ngModelChange) does not fire while remove all values or paste values

问题 (ngModelChange) event does not fire while clear all values from input field by using ctrl+A or paste value <input pInputText (ngModelChange)="IsElementDataMissingForMultiValue(languages.TranslationValue)" [(ngModel)]="languages.TranslationValue" type="text" /> //controller function Controller() { function IsElementDataMissingForMultiValue(value) { alert(value) } } The ( ngModelChange ) event triggering while removing value one by one or adding value one by one. But it does not trigger when

AngularJS ng-model value is lost after custom validation directive is triggered

阅读更多关于 AngularJS ng-model value is lost after custom validation directive is triggered

问题 I created a custom validation directive and used it in a form. It can be triggered with no problem, but after the validation is triggered, I found that the model value is just lost. Say I have ng-model="project.key" and after validation, project.key doesn't exist in the scope anymore. I think somehow I understood AngularJS wrong and did something wrong. Code speaks. Here is my html page: <div class="container"> ... <div class="form-group" ng-class="{'has-error': form.key.$invalid && form.key.

What is the complete list of events supported by angular's updateOn property of ngModelOptions?

阅读更多关于 What is the complete list of events supported by angular's updateOn property of ngModelOptions?

问题 The docs say updateOn: string specifying which event should the input be bound to. You can set several events using an space delimited list. There is a special event called default that matches the default events belonging of the control. The page mentions a few events: blur , default , submit . Are there any others? Is the full list documented anywhere? 回答1: As far as i know, you can bind any available DOM event to the updateOn property. see a full list here. Having a look at the Source of

Trying to replace spaces with dashes using ng-model

阅读更多关于 Trying to replace spaces with dashes using ng-model

问题 I'm new to AngularJS and trying to create a simple app that will allow me to upload files to my Laravel driven website. I want the form to show me the preview of what the uploaded item will look like. So I am using ng-model to achieve this and I have stumbled upon the following: I have an input with some basic bootstrap stylings and I am using custom brackets for AngularJS templating (because as I mentioned, I am using Laravel with its blading system). And I need to remove spaces from the

Angularjs disabling drop down

阅读更多关于 Angularjs disabling drop down

I have a ui in which based on the selection of one drop down another dropdown should be disabled. Both these dropdowns are generated using ng-repeat . Below is the code sample <tr data-ng-repeat="abc in xyz.divisionViewList" > <select data-ng-model="abc.selectedAppRole" ng-init="abc.selectedAppRole =abc.selectedAdRole" id="{{abc.applicationId}}_{{abc.divisionId}}" name="{{abc.selectedAppRole}}"> <option value="null">Select/Deselect a role</option> <option data-ng-repeat="roleDetail in abc.roleDetails" data-ng-selected="{{abc.adRole == abc.selectedAdRole}}" value="{{abc.adRole}}"> {{abc