ссылка на ввод html в ng-repeat - PullRequest
Новая
       14

ссылка на ввод html в ng-repeat

0 голосов
/ 05 июля 2018

У меня есть вопрос о том, как получить информацию из входного тега, который генерируется внутри (nes-повторений).

У меня есть вложенные объекты, которые проходят через ng-repeat. На самом внутреннем уровне мне нужно взять ключ и прикрепить его к введенному пользователем значению. (Это имя свойства и частота его выборки.) Однако я не могу получить доступ к значению поля ввода.

Я бы с удовольствием передал значение напрямую, и мне не пришлось бы вводить идентификатор для входа, например, так: 

<div class="well" ng-show="showProps == true" ng-repeat="(key, value) in obj">
  <h5><strong>{{key}}</strong></h5> 
  <h5>Sample Interval:</h5>
  <input id="period" class="form-control" type="number" value="20" step="10" />
  <button ng-click="addToList(device,obj,key,period.value)">add</button>
  <button ng-click="removeFromList(device,obj,key)">remove</button>
</div>



  $scope.addToList = function(device,obj,prop,period) {
    console.log("Sample period: " + period);
  }

Однако, это дало мне неопределенную ошибку, поэтому я попытался дать ей идентификатор с переменной {{$ index}}, а затем в ссылке на javascript. 

<div class="well" ng-show="showProps == true" ng-repeat="(key, value) in obj">
  <h5><strong>{{key}}</strong></h5> 
  <h5>Sample Interval:</h5>
  <input id="period_{{$index}}" class="form-control" type="number" value="20" step="10" />
  <button ng-click="addToList(device,obj,key,{{$index}})">add</button>
  <button ng-click="removeFromList(device,obj,key)">remove</button>
</div>



  $scope.addToList = function(device,obj,prop,period_index) {
    var per = document.getElementById("peroid_{{$perod_index}}").value
    console.log("found a function: " + per);
  }

Однако, это дало мне ошибку разбора, поэтому я чувствую, что лаю не то дерево. Как мне получить значение оттуда и в JavaScript?

1 Ответ

0 голосов
/ 05 июля 2018

Не совсем уверен, что вы хотите сделать, но проверьте это и посмотрите, поможет ли это: 

angular.module("app", [])
.controller('MainCtrl', function ($scope)
{
  $scope.showProps = true;
  $scope.items = [];
  $scope.obj = {
    "first": {
      input: 20,
      items: []
    },
    "second": {
      input: 20,
      items: []
    }
  };
  
  $scope.addToList = function(key,value)
  {
    $scope.obj[key].items.push(value);
  };
  
  $scope.removeFromList = function(key, value)
  {
    var index = $scope.obj[key].items.indexOf(value);
    
    if(index != -1)
    {
     $scope.obj[key].items.splice(index, 1);
    }
    
  };
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
  <div class="well" ng-show="showProps == true" ng-repeat="(key, value) in obj">
    <h5><strong>{{key}}</strong></h5> 
    <h5>Sample Interval:</h5>
    <input class="form-control" type="number" step="10" ng-model="value.input" />
    <button ng-click="addToList(key,value.input)">add</button>
    <button ng-click="removeFromList(key, value.input)">remove</button>
    <span ng-repeat="item in value.items track by $index"><br>{{item}}</span>
  </div>
</div>
</body>
</html>
...