我正在尝试在函数中添加 2 个属性的值，但 1 个属性的值未定义。我只需要增加 css 栏的百分比

Question

我正在尝试增加条形的百分比(用户给出的输入(。用户提交其输入后，该值应通过该输入增加。如何使用 ng 样式实现这一点。

  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.incrementRate= function(t,r)
  {
     t.rate = r;
     t.bar = parseInt(t.bar) + Number(r); //giving NaN
     alert(t.bar); //giving undefined
  };

<table>
  <tr>
    <td>Select course:</td>
    <td>
      <select class="form-control contact-text" name="course" ng-model="tech.name">
        <option ng-repeat="t in tech" ng-value="t.name">{{t.name}}</option>
      </select> 
      <br> 
    </td>
  </tr>
  <tr>
    <td>Rate:</td>
    <td>
      <input type="radio" class="ml-3" name="rate" value="1" checked ng-model="tech.rate"> 1
      <input type="radio" class="ml-3" name="rate" value="2" ng-model="tech.rate"> 2
      <input type="radio" class="ml-3" name="rate" value="3" ng-model="tech.rate"> 3
      <input type="radio" class="ml-3" name="rate" value="4" ng-model="tech.rate"> 4
      <input type="radio" class="ml-3" name="rate" value="5" ng-model="tech.rate"> 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(tech,tech.rate)">Rate</button>
    </td>
  </tr>
</table>
<!-- for eg, -->
Android:
    <div class="wrapper">
      <div class="android skills" ng-style="{'width':tech[0].bar+'%'}">
        {{tech[0].bar+'%'}}
      </div>
    </div>

Answer 1

t.bar undefined，因为在你称之为incrementRate(tech,tech.rate)的地方，tech是$scope.tech - 所有技术的列表。不是您在ng-repeat中使用的t。

基本上，您将tech混合为技术列表，将技术混合为所选技术。我建议您使用$scope.techList作为列表，$scope.tech作为所选技术。

使用ng-model="tech"和ng选项，以便select能够选择技术。

Answer 2

您将$scope.tech定义为数组：

$scope.tech = [
 {...}
];

但是在您看来，您正在尝试访问它，就好像它是一个具有不存在的rate属性的对象一样：

<button type="submit" 
  ng-click="incrementRate(tech,tech.rate)">Rate</button>
<!-- tech is an array, and has no property called `rate`-->

如果在此处放置一些日志消息，您将看到错误：

  $scope.incrementRate= function(t,r)
  {
     console.log(t) // Array(6)
     console.log(r) // Undefined!
     ...
  };

此外，将select组件的模型分配为数组的属性是一个糟糕的选择。这是非常令人困惑的。使用专用变量分配所选项目。通过使用带有选项而不是ngOptions ngRepeat，您也使自己的事情变得非常困难。使用此方法，您只能访问项的字符串表示形式，而不能访问项对象本身。

<select ng-model="selectedTech" ng-options="t as t.name for t in tech track by t.name">
</select>

现在，您可以在函数中引用所选项：

<button type="submit" 
  ng-click="incrementRate(selectedTech)">Rate</button>

$scope.incrementRate= function(techItem)
{
  console.log(techItem) // {name: "angular", rate: 0, bar: 10},
  console.log(techItem.rate) // 0
  ...
};

由于selectedTech是 $scope 的属性，因此您甚至不需要将其作为变量传入：

<button type="submit" 
  ng-click="incrementRate()">Rate</button>

$scope.incrementRate= function()
{
  console.log($scope.selectedTech) // {name: "angular", rate: 0, bar: 10},
  console.log($scope.selectedTech.rate) // 0
  ...
};