AngularJS中用ng-style实现进度条百分比按用户输入递增问题排查

我来帮你搞定这个问题，咱们先拆解下现有代码里的核心问题：

问题根源 #

1. 表单绑定错误：你把下拉框的ng-model绑定到了tech.name，但tech是一个数组，不是单个对象；单选框同理绑定到tech.rate也是错误的，这导致你无法正确获取选中的课程和评分值。
2. 函数参数错误：incrementRate里传的是整个tech数组，而不是选中的单个课程对象，所以t.bar自然会是undefined，计算时就出现了NaN。

修复步骤 #

1. 调整控制器变量，新增绑定用的变量

在控制器里添加两个新变量，分别用来存储选中的课程和评分：

var tech = [ 
  {name: "android", rate: 0, bar: 10}, 
  {name: "angular", rate: 0, bar: 10}, 
  {name: "node", rate: 0, bar: 10}, 
  {name: "maven", rate: 0, bar: 10}, 
  {name: "log", rate:0, bar: 10}, 
  {name: "vs2019", rate: 0, bar: 10} 
];
$scope.tech = tech;
// 新增两个绑定变量，设置默认值
$scope.selectedTech = tech[0]; 
$scope.selectedRate = 1; 

2. 修复表单的ng-model绑定

• 下拉框：ng-model绑定到selectedTech，ng-value绑定整个课程对象t，这样能直接拿到选中的课程数据
• 单选框：ng-model绑定到selectedRate，用ng-value设置数字类型的评分值（避免后续类型转换问题）

修改后的表单代码：

<table>
 <tr>
 <td>Select course:</td>
 <td>
 <select class="form-control contact-text" name="course" ng-model="selectedTech">
 <option ng-repeat="t in tech" ng-value="t">{{t.name}}</option>
 </select>
 <br>
 </td>
 </tr>
 <tr>
 <td>Rate:</td>
 <td>
 <input type="radio" class="ml-3" name="rate" ng-value="1" ng-model="selectedRate"> 1
 <input type="radio" class="ml-3" name="rate" ng-value="2" ng-model="selectedRate"> 2
 <input type="radio" class="ml-3" name="rate" ng-value="3" ng-model="selectedRate"> 3
 <input type="radio" class="ml-3" name="rate" ng-value="4" ng-model="selectedRate"> 4
 <input type="radio" class="ml-3" name="rate" ng-value="5" ng-model="selectedRate"> 5
 </td>
 </tr>
 <tr>
 <td colspan="2" style="text-align:center">
 <br>
 <br>
 <button type="submit" name="rate" class="btn btn-primary" ng-click="incrementRate(selectedTech, selectedRate)">Rate</button>
 </td>
 </tr>
</table>

3. 修复incrementRate函数

现在函数接收的是选中的单个课程对象和评分值，直接计算即可，还可以加个判断防止进度条超过100%：

$scope.incrementRate= function(t, r) {
  // 保险起见，确保评分是有效数字
  const rate = Number(r);
  if (isNaN(rate)) return;
  
  t.rate = rate;
  // 计算新的bar值，限制最大为100%
  t.bar = Math.min(parseInt(t.bar) + rate, 100);
  console.log(t.bar); // 现在能正确输出数值了
};

4. 优化进度条渲染（可选）

你之前的进度条是硬编码的，用ng-repeat可以自动渲染所有课程的进度条，更灵活：

<div ng-repeat="t in tech">
  {{t.name}}: 
  <div class="wrapper" style="width: 100%; height: 20px; background: #eee; margin: 5px 0;">
    <div class="skills" ng-style="{'width': t.bar+'%', 'height': '100%', 'background': '#007bff'}">
      {{t.bar+'%'}}
    </div>
  </div>
</div>

完整运行逻辑 #

现在当你选择课程、选中评分，点击Rate按钮后，对应课程的bar值会增加选中的评分，进度条宽度也会实时更新，不会再出现NaN或undefined的问题。

内容的提问来源于stack exchange，提问作者ss_rn