How to reinitialize Angular model with nested data?

Question

I've start a little proof of concept this week with Angular Material, and in this POC, I have a table that displays nested data:

<table>
    <thead>
        <tr>
            <th colspan="2">Employee Name</th>
            <th>Ovr</th>
            <th>&nbsp;</th>
        <tr>
    <thead>
    <tbody ng-repeat="employee in evaluation.employees" >
        <tr ng-class-odd="'odd-row'">
            <td class="photo"><img src="{{employee.photo}}" /></td>
            <td class="name"><span class="firstname">{{employee.firstName}}</span><br/><span class="lastname">{{employee.lastName}}</span></td>                
            <td class="column-align-center"><span>{{employee.grade}}</span></td>
            <td class="column-align-center"><md-button ng-click="toggleAptitudes(employee.id)" class="md-raised md-primary custom-button">+</md-button></td>
        </tr>
        <tr ng-repeat="skill in employee.skills" ng-show="employee.displayAptitudes">
            <td colspan="4" style="padding: 0px 20px 0px 20px;">
                <md-slider-container>
                    <span>{{skill.name}}</span>
                    <md-slider class="md-primary" flex min="0" max="100" ng-model="skill.value" ng-change="calculateAptitudesGrade(employee.id)" aria-label="skill.name" id="red-slider">
                    </md-slider>
                    <md-input-container>
                        <input flex type="number" ng-model="skill.value" aria-label="skill.title" aria-controls="red-slider">
                    </md-input-container>
                </md-slider-container>
            </td>
        </tr>
    </tbody>
</table>

Snippet from the Controller:

var self = this;

// Mock data...
self.employees = [
    { id: 1, firstName: 'FirstName1', lastName: 'LastName1', photo: 'img/photo1.png', grade: 0, aptitudes: [...], displayAptitudes: false },
    { id: 2, firstName: 'FirstName2', lastName: 'LastName2', photo: 'img/photo2.png', grade: 0, aptitudes: [...], displayAptitudes: false }
];

$scope.calculateAptitudesGrade = function(employeeId) {
    // The overall calculation happen here where I collect all the skills values for the employee.
    ...
};

It's working fine for the first row I modify. I click the toggle button, it shows a list of skills with sliders, I move the slider and the overall calculation works very well.

THE PROBLEM: whenever I choose another employee, the sliders are set visually with the previous values. How to have the sliders set to 0 for each employee?

Are you trying to have 1 slider that just updates with the selected employee? — LoganRx
– LoganRx, Commented Nov 22, 2016 at 15:54
What does the toggleAptitudes function look like? I changed the ng-click and it seems to be working for me: codepen.io/jamesfeigel/pen/WojvdV — machinehead115
– machinehead115, Commented Nov 22, 2016 at 15:56
@LoganRx When I move the slider, the calculation works for the selected employee and I get a Grade displayed on the row. BUT, if I toggle another employee, all the sliders are set with the previous value visually only, the model is not affected. — Jonathan Anctil
– Jonathan Anctil, Commented Nov 22, 2016 at 15:58
@machinehead115 it suck right now, I did something quick to set true/false to the right employee: $scope.toggleAptitudes = function(employeeId) { for (var i = 0; i < self.employees.length; i++) { if (self.employees[i].id == employeeId) { self.employees[i].displayAptitudes = !self.employees[i].displayAptitudes; break; } }; }; — Jonathan Anctil
– Jonathan Anctil, Commented Nov 22, 2016 at 16:00

machinehead115 · Accepted Answer · 2016-11-22 16:02:54Z

1

For your ng-click on the button change it from toggleAptitudes(employee.id) to employee.displayAptitudes = !employee.displayAptitudes

answered Nov 22, 2016 at 16:02

machinehead115

1,65710 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonathan Anctil Over a year ago

Yeah you're right, it is better that way! But that doesn't solve the problem if I click on another row, all sliders are still set to the previous value... But I've just found the reason!!!

Jonathan Anctil · Accepted Answer · 2016-11-22 16:41:36Z

Ok ok ok, I've found the problem!!

Like I says, it is a POC and I did this quick. The problem come from the «Aptitudes» array that I have defined... and reused for every employee defined in the array...

self.aptitudes= [
    { id: 1, title: 'Aptitude 1', value: 0 },
    { id: 2, title: 'Aptitude 2', value: 0 },
    { id: 3, title: 'Aptitude 3', value: 0 }   
];

// Mock data...
self.employees = [
    { id: 1, firstName: 'FirstName1', lastName: 'LastName1', photo: 'img/photo1.png', grade: 0, aptitudes: self.aptitudes, displayAptitudes: false },
    { id: 2, firstName: 'FirstName2', lastName: 'LastName2', photo: 'img/photo2.png', grade: 0, aptitudes: self.aptitudes, displayAptitudes: false }
];

Instead of declaring an array, I have create a function that return the array:

function getAptitudes() {
    return [
        { id: 1, title: 'Aptitude 1', value: 0 },
        { id: 2, title: 'Aptitude 2', value: 0 },
        { id: 3, title: 'Aptitude 3', value: 0 }   
    ];
}

Collectives™ on Stack Overflow

How to reinitialize Angular model with nested data?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related