javascript - 文本字段的值将显示动态 div

Question

我的网页有一个文本字段，当您在其中输入 0 时，“添加”按钮将被禁用。当输入的次数超过 0 时，按钮应启用，并且应在输入值的次数的文本下方显示“hello”。例如，输入 2，“hello”一词应显示 2 次，与 3 相同。

这是我的代码:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "0";
  $scope.ash = "";
  var x = angular.element(document.getElementById("xyz"));
  $scope.hello = function() {
    $scope.name = x.val();
    $scope.ash = ['ashish'];
    for (var i = 0; i < $scope.name; i++) {
      alert($scope.ash);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="$scope.name">
  <input id="xyz" type="text" value="" ng-model="name" />
  <button ng-click="hello()" ng-disabled="name == 0">Add</button>
  <p ng-model="abc" ng-repeat="x in $scope.ash">hello</p>
</div>

Answer 1

你可以这样做:

1. 将id添加到button以便能够在JS中找到它。

2. 在要添加的内容之后查找元素hello:

   var button = angular.element(document.getElementById('button'));
   

3. 在该元素之后添加 hello i 次:

   button.after('<p>hello</p>');
   

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "0";
    $scope.ash = "";
    var x = angular.element(document.getElementById("xyz"));
    $scope.hello = function() {
        $scope.name = x.val();
        $scope.ash = ['ashish'];
        var button = angular.element(document.getElementById('button'));
        for (var i = 0; i < $scope.name; i++) {
            button.after('<p>hello</p>');
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="$scope.name">
  <input  id="xyz" type="text" value="" ng-model="name"/>
  <button ng-click="hello()"  ng-disabled="name == 0" id="button">Add</button>
</div>