如何用嵌套數據重新初始化Angular模型？

Question

我已經開始概念本週與角料一點點的證明，並在此POC，我有一個顯示嵌套數據的表：從控制器

<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> 

段：

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

對於我修改的第一行，它工作正常。我點擊切換按鈕，它顯示了滑塊的技能列表，我移動滑塊，整體計算效果非常好。

問題：無論何時我選擇另一位員工，滑塊設置與以前的值可視化。如何將每個員工的滑塊設置爲0？

Answer 1

OK OK OK，我已經找到了問題！

就像我說的，這是一個POC，我做得很快。問題來自我已經定義...以及在陣列中定義的每一位員工重用«性向»陣列...

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

相反的聲明數組，我有創建返回數組的函數：

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

Answer 2

有關按鈕改變它從你的toggleAptitudes(employee.id)到ng-clickemployee.displayAptitudes = !employee.displayAptitudes