AngularJS ng-change not working correctly

Question

So, this is my select html:

    <select
    class="custom-select mb-2 col-md-4 col-12 mr-sm-2 mb-sm-0"
    ng-model="serverSelected"
    ng-change="onServerSelect(serverSelected)"
    >

    <option *ngFor="let server of servers"
            value="{{ server.display_name }}"
    >{{server.display_name}}</option>
    </select>

server.component.ts:

  onServerSelect(serverSelected){
console.log(this.serverSelected.displayName);}

How to get this selected server.display_name to be displayed in my onServerSelect() method, because this is not working. What am i doing wrong?

You are mixing AngularJS and Angular syntax. Did you mean `ng-repeat` or better `ng-options`? — Aluan Haddad, Nov 26 '17 at 13:53
Yes, but when i am trying to use ng-options, it's just not working, and not displaying any data. — user3361149, Nov 26 '17 at 14:07
*ngFor is a feature of Angular 2+. Do you try with ng-repeat? — Syedur, Nov 26 '17 at 14:16
@georgeawg But, i am only using server.component.ts and server.component.html so where should i put this controller in above example? Sorry I am beginner in angular, and it's so frustrating for me. I got defined array of servers in my component, but when I'm using ng-repeat="server in servers", and then trying to get server.id angular says, that identifier 'server' is not defined. — user3361149, Nov 26 '17 at 14:28
See this [DEMO on PLNKR](https://plnkr.co/edit/vnBsZWizv6dopPwIbVQG?p=preview). — georgeawg, Nov 26 '17 at 14:32
it's still not clear here if you are using [tag:angularjs] or [tag:angular]. It **sounds like** you are using Angular2, since you refer to using TypeScript files, but you are trying to mix Angular1 and Angular2 syntax. Despite having similar names, **Angularjs and Angular are not the same framework**, and you can't mix and match their code. — Claies, Nov 27 '17 at 04:00

score 0 · Answer 1 · answered Nov 27 '17 at 03:54

0

Actually what are you using ? Angularjs or Angular? If you are using Angularjs then you are mixing the angular syntax *ngFor. Instead you can use ng-repeat or ng-options. Read this for more information AngularJs Select

answered Nov 27 '17 at 03:54

Sam Daniel

141
1
3
17

score 0 · Answer 2 · answered Nov 27 '17 at 04:02

do this way

why mixing *ngFor in angular 1

syntax must be ng-repeat.

angular 1 ex. ng-model, ng-if, ng-repeat, etc.

angular 2 > *ngModel, *ngIf, *ngFor, etc.

<select class="custom-select mb-2 col-md-4 col-12 mr-sm-2 mb-sm-0">

    <option ng-repeat="let server of servers" value="{{ server.display_name }}" ng-model="serverSelected">
<span ng-change="onServerSelect(serverSelected)">
{{server.display_name}}
</span>
</option>
    </select>

AngularJS ng-change not working correctly

2 Answers2