如何用嵌套数据重新初始化Angular模型？

我已经开始概念本周与角料一点点的证明，并在此POC，我有一个显示嵌套数据的表：从控制器如何用嵌套数据重新初始化Angular模型？

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

来源

2016-11-22 Jonathan Anctil

您是否试图让1个滑块随所选员工更新？ – LoganRx

'toggleAptitudes'功能是什么样的？我改变了'NG-click'，它似乎是为我工作：http://codepen.io/jamesfeigel/pen/WojvdV – machinehead115

@LoganRx当我移动滑块，计算适用于所选择的员工和我得到一个等级显示在行中。但是，如果我切换另一位员工，则所有滑块都只能以前面的值设置，模型不受影响。 –

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

来源

2016-11-22 16:16:10

有关按钮改变它从你的toggleAptitudes(employee.id)到ng-clickemployee.displayAptitudes = !employee.displayAptitudes

来源

2016-11-22 16:02:54 machinehead115

是的，你说得对，这样更好！但是这并不能解决问题，如果我点击另一行，所有滑块仍然设置为以前的值...但我刚刚找到原因！ –

如何用嵌套数据重新初始化Angular模型？

回答

相关问题