CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangularjs-ng-change
munzx
munzx

Reputation: 373

update a model in a ng-repeat inside another

i am having the first ng-repeat looping over some data and another ng-repeat looping over other data as well . i added ng-change in the inner ng-repeat which loops over some data to fill a select element with "options/values" , the ng-change must listen to changes in select element and calls a function everytime the value gets changed but that dose not happen .

here is the html code

                    <tr ng-repeat="memo in memos" class="no-animate">
                        <td class="text-center">{{memo.memoStatus | localize:'ar'}}</td>
                        <td class="text-center">
                            {{memo.memoRequiredDate | date: 'yyyy-MM-dd'}}
                            <p ng-hide="memo.memoRequiredDate">----</p>
                        </td>
                        <td class="text-center">
                            <select ng-model="newInfo.selectedConsultantIndex" ng-change="updateConsultant(memo.caseId, newInfo.selectedConsultantIndex)" class="form-control">
                                <option value="">-- المستشارين --</option>
                                <option ng-repeat="consultant in consultants track by $index" value="{{$index}}">{{consultant.firstName}} {{consultant.lastName}}</option>
                            </select>
                        </td>
                        <td class="text-center">{{memo.court[0].name}}</td>
                        <td class="text-center">
                            <p ng-repeat="defendant in memo.defendant">
                                {{defendant.user.firstName}} {{defendant.user.lastName}} - {{defendant.role[defendant.role.length - 1]}}
                            </p>
                        </td>
                        <td class="text-center">
                            <p ng-repeat="client in memo.client">
                                {{client.user.firstName}} {{client.user.lastName}} - {{client.role[client.role.length - 1]}}
                            </p>
                        </td>
                        <td class="text-center">إختبارية</td>
                        <td class="text-center">{{memo.caseNumber}}</td>
                    </tr>

and here is the JS code

 $scope.updateConsultant = function(){
    console.log('hello world');
}

Upvotes: 1

Views: 62

Answers (3)

munzx
munzx

Reputation: 373

the problem turned out to be caused by another directive "angular-print printTable" , the directive creates a new table with only text values and then overwrite the old table.

Upvotes: 1

seminull
seminull

Reputation: 121

Try using a watcher instead of ng-change

    $scope.$watch('newInfo.selectedConsultantIndex', function() {
      updateConsultant(...)
    });

You may have to build an array or other data structure to support whatever logic you're using for the change.

Upvotes: 0

ThibaudL
ThibaudL

Reputation: 1009

You should try to use the ngOptions for your select : https://docs.angularjs.org/api/ng/directive/ngOptions

Upvotes: 1

Related Questions