Ali Majed HA Ответов: 1

Привязка данных к элементу с помощью angularjs

Привет
Я создаю числовые входные данные динамически и хочу привязать каждое числовое входное значение к связанному с ним элементу "p". Я написал код в jsfiddle каждый элемент "p" предполагает отображение соответствующего выбранного числа в числовом вводе, но это не так. Например, если я изменю первое числовое входное значение, то элемент "p" должен быть изменен и показать текущее значение, но элемент "p" не отображается.
не могли бы вы сказать, где в моем коде что-то не так?
С уважением

Что я уже пробовал:

Я написал свой код в jsfiddle.

1 Ответов

Рейтинг:
5

Karthik_Mahalingam

пробовать

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script>
         var app = angular.module('myModule', []);
         app.controller('myController', function ($scope, $compile) {
             $scope.myfunction = function () {
                 var dyn = angular.element(document.getElementById("test"));
                 $compile(dyn)($scope);
             }
         });
         $(document).ready(function () {
             for (i = 0; i <= 4; i++) {
                 var _input = document.createElement("input");
                 _input.setAttribute("type", "number");
                 _input.setAttribute("ng-model", "quantity" + i);
                 var _result = document.createElement("p");
                 _result.setAttribute("ng-bind", "quantity" + i);
                 document.getElementById("test").appendChild(_input);
                 document.getElementById("test").appendChild(_result);
             }

             angular.element(document.getElementById('test')).scope().myfunction()
         }); 

     </script>
</head>
<body >
    <div id="test" ng-app="myModule" ng-controller="myController">

    </div>
</body>
</html>

Karthik_Mahalingam

демонстрация Корзина AngularJS-JSFiddle[^]

Ali Majed HA

Большое спасибо. Это было здорово. Скажите, пожалуйста, в чем была моя главная ошибка?

Karthik_Mahalingam

динамические элементы должны быть скомпилированы с помощью angular

Ali Majed HA

Спасибо снова.

Karthik_Mahalingam

добро пожаловать