CODEWITHSUNDEEP
javascriptangularjsangular-material
Jonathan Anctil
Jonathan Anctil

Reputation: 1037

How to reinitialize Angular model with nested data?

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?

Upvotes: 0

Views: 68

Answers (2)

Jonathan Anctil
Jonathan Anctil

Reputation: 1037

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 }   
    ];
}

Upvotes: 0

machinehead115
machinehead115

Reputation: 1657

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

Upvotes: 1

Related Questions