angular. js данные показывают только самые последние ссылки - PullRequest
Новая
       1

angular. js данные показывают только самые последние ссылки

1 голос
/ 22 марта 2020

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

w3school code run здесь: https://www.w3schools.com/code/tryit.asp?filename=GD4AV18UABPF

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <body>

  <div ng-app="">
 <script>
    function linkPairing() {
        var divElement = angular.element(document.querySelector('.transaction'));
        var $hidden = angular.element(document.querySelector('.hiddenNodeName'));

        divElement.append($hidden);
        divElement.append("<br />");
    }   
  </script>

  <p>Input something in the input box:</p>
  <form>
  <p>Name: <input type="text" ng-model="newNodeName"></p>
  <p>{{newNodeName}}</p>
  <p>{{newNodeName}}</p>
  <button class="addNewTransaction" id="addNewTransaction" type="button" onclick="linkPairing()">Go</button>                
  </form>
  <div hidden><span class="hiddenNodeName" >{{newNodeName}}</span></div>
  <p class="transaction"></p>

  </div>

</body>
</html>

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

var $div = $("<span>{{newNodeName}}</span>");
divElement.append($compile($div)($scope));
$scope.$apply();

Я попробовал варианты выше, но не смог добиться даже частичного успеха, увиденного в примере. Я подозреваю, что мне нужно более глубокое понимание angular, в частности, области применения, чтобы быть успешным с этим подходом. Я использую и jquery, и angular, и читаю мнение stackOverflow, чтобы свести к минимуму загрузку js модуля. Первоначально все было в jquery, но данные ng-bind в angular выглядели очень привлекательно, когда я добрался до этой конкретной функции связанного отображения данных. Я неохотно реорганизую все в angular. js только сейчас с неуверенностью в том, что я в конечном итоге добьюсь успеха. Может ли этот обходной путь работать так, как я ожидал?

Ответы [ 2 ]

2 голосов
/ 23 марта 2020

Вот рабочий пример: https://www.w3schools.com/code/tryit.asp?filename=GD4KGYTO3RCF

, а также фрагмент 

<!DOCTYPE html>
<html>
   <!--module starts surrounds body tag name is myapp -->
  <body ng-app="myapp">
  <!--controller surrounds the  div tag ,A controller is associated with module for functionality purpose-->
  <div ng-controller="myctrl">
  <form >
  Input something in the input box <br><br>
  Name: <input type="text" ng-model="newNodeName">
  <!-- we use ng click  for click in angular js -->
  <button  id="btn-newTransation" type="button"                		
  ng-click="linkPairing()">Go</button>
  
  </form>
  <!-- ng-repeat repeats the html inside it , nodes is array, node is each iteration's value , track by $index to avoid duplication error and get index
  ng-repeat="node in nodes"
  -->
  <!--ng repeat usually expects array but to just repeat an element some time this will work as shortcut-->
  <div ng-repeat="x in [].constructor(count) track by $index" class="nodes">
   <p>{{newNodeName}}</p>
  </div>
  {{message}}
  <!-- i dont know why are you using following tags for -->
  <div hidden>
  <span class="hiddenNodeName">{{newNodeName}}</span></div>
  <p class="transaction"></p>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script>
    //initializing the myapp with controller
    angular.module("myapp",[]).controller("myctrl",function($scope){
    //variables in $scope are accessible in html example inside interpolation {{newNodeName}}
     $scope.message="";
    $scope.count=0;
	$scope.linkPairing=function(){ 
     $scope.count++;
     if($scope.count==3){
       $scope.message="Did it work? if it worked please upvote and mark it as correct "
	 }
     }
    });	
</script>
</body>
</html>
0 голосов
/ 23 марта 2020

[отвечает на ответ Supercool, который не помещается в комментарии:]

Это ближе, чем у меня, и дает мне хорошее начало для решения с массивами (спасибо, Supercool). Не совсем то, что я после того, хотя. Вот состояния, которые я получаю из вашего кода: 

[State 1., after typing "1st" and pressing Go]
input box: 1st
1st

[State 2. after adding "2nd," and pressing Go]
input box: 1st 2nd
1st
1st 2nd

[End State. after adding "3rd," and pressing Go]
input box: 1st 2nd 3rd
1st
1st 2nd
1st 2nd 3rd

Что я хотел бы видеть: 

[State 1., after typing "1st" and pressing Go]
input box: 1st
1st

[State 2. after adding "2nd," and pressing Go]
input box: 1st 2nd
1st 2nd
1st 2nd

[End State. after adding "3rd," and pressing Go]
input box: 1st 2nd 3rd
1st 2nd 3rd
1st 2nd 3rd
1st 2nd 3rd

Кроме того, после каждого нажатия клавиш в промежутке между нажатием "Go, "весь сгенерированный текст будет отражать все, что находится в поле ввода. Включая все эти промежуточные состояния для вышеприведенного примера, предпоследнее будет: 

[Penultimate state. in the middle of typing out "3rd" and before pressing Go]
input box: 1st 2nd 3r
1st 2nd 3r
1st 2nd 3r

Я думал, что смогу получить такую ​​функциональность, потому что думал (все еще делаем?), Что angular 's { {ссылка}} связана с оригиналом и будет автоматически обновляться независимо от того, сколько у вас было, когда вы их сделали, и т. д. c ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...