Question

在CheckBox的Check / Uncheck上，我试图添加或删除相应的HTML 动态

点击我要添加的一个复选框

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.prepend('One'<br/>');

点击两个复选框我想添加一个

 var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.prepend('Two<br/>');

我试过如下面的HTML，On Uncheck但我无法删除HTML

MFGetStrideForBitmapInfoHeader

Answer 1

为什么不再使用ng-repeat打印出$scope.selectedNames数组中推送的值？

由于您的重复元素为<div>，您可以免费获得换行符。但是，您也可以轻松地执行<span ng-repeat="n in selectedNames">{{n}}<br /></span>

＆＃13;

var app = angular.module('plunker', []);

app.controller('myCtrl', function($scope) {
  $scope.names = ["One", "Two", "Three"];
  $scope.selectedNames = [];

  $scope.select = function(name) {
    var index = $scope.selectedNames.indexOf(name);
    if (index < 0) {
      $scope.selectedNames.push(name);

      var myEl = angular.element(document.querySelector('#divID'));
      myEl.prepend('' + name + '<br/>');
    } else
      $scope.selectedNames.splice(index, 1);
  }
});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="myCtrl">
  <div ng-repeat="n in names">
    <input type="checkbox" ng-click="select(n)" />{{n}}
  </div>

  <div ng-repeat="n in selectedNames">{{n}}</div>
</body>

</html>

＆＃13;

关于Plunker的镜像：http://plnkr.co/edit/pAIpY4qZpT4SvLgCaYIy?p=preview

Angular JS On Check / Uncheck Checkbox添加和删除相应的HTML

1 个答案: