Я пытаюсь добавить значения 2 свойств в функцию, но значение 1 свойство дает неопределенное. Мне просто нужно увеличение% css bar

Question

Я пытаюсь увеличить процент бара с точки зрения скорости (ввод данных пользователем). После того, как пользователь отправит свой ввод, значение должно быть увеличено на этот ввод. Как мне добиться этого, используя стиль нг.

  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 - список всех технологий.Не t, который вы используете в ng-repeat.

По сути, вы смешиваете tech в качестве списка технологий и технологий в качестве выбранной технологии.Я предлагаю вам использовать $scope.techList в качестве списка и $scope.tech в качестве выбранной технологии.

Используйте ng-model="tech" и ngOptions , чтобы 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 в качестве свойствамассив.Это очень сбивает с толку.Используйте выделенную переменную, чтобы назначить выбранный элемент.Вы также очень усложнили для себя использование ngRepeat с опциями вместо ngOptions.При таком подходе у вас есть доступ только к строковому представлению элемента, а не к самому объекту элемента.

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

};