Question

我想问一下通过在AngularJS中点击事件来制作列表，所以这就是问题，如果你点击下面的plunker，你会看到一个带有值的项目列表（字符串），当我想点击一个值然后空白列表将包含我点击的值...

我的目标是制作一个包含我点击的项目的列表，我想通过那里的按钮将其删除，但我想重点关注如何显示我先点击的所有项目。

所以在练习中，当你点击＆＃34; Gila＆＃34;首先然后它会出现在空白列表中，之后当我点击＆＃34; yuko＆＃34;时，我想尝试如何显示＆＃34; Gila＆＃34;它列出了一个清单

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js">
    </script>
    <title>Belajar Angular</title>
    <script type="text/javascript">
      var app = angular.module('tesapp', []);
      app.controller('tesCtrl', function($scope,$http){
        $scope.DapatkanItem = function(){
          $http.get('sengaja.json').success(function(data){
            $scope.item = data;
          });
        };

        $scope.DapatkanItem();

        $scope.klikIseng = function(item){
          $scope.namaItem = item.name;
        };

        $scope.tampilKlikItem = function(){

        }
      });

        app.filter('regex', function() {
          return function(input, field, regex) {
              var patt = new RegExp(regex);
              var out = [];
              for (var i = 0; i < input.length; i++){
                  if(patt.test(input[i][field]))
                      out.push(input[i]);
              }
            return out;
          };
        });
    </script>
  </head>
  <body ng-app="tesapp" ng-controller="tesCtrl">
    <h1>Mencoba Filtering</h1>
    <h2>Mencoba ng-click</h2>
    <div class="col col-4">
      <label class="select">
        <select name="gender" ng-model="alfabet">
          <option value="^" selected disabled>Alphabet</option>
          <option value="^(A|a)">A</option>
          <option value="^(B|b)">B</option>
          <option value="^(C|c)">C</option>
        </select>
      </label>
    </div>
    <ul>
      <li>{{namaItem}}</li>
    </ul>
    <div ng-switch="alfabet">
      <div ng-switch-default>
        <ul ng-repeat="tes in item.stores | regex:'name':alfabet | orderBy: 'preparation' | orderBy: 'name'">
          <input type="button" ng-click="klikIseng(tes)" value="klik gue">
          <li ng-if="tes.preparation == ''" >{{tes.name}} kosong</li>
          <li ng-if="tes.preparation == '1'">{{tes.name}} satu</li>
          <li ng-if="tes.preparation == '2'">{{tes.name}} dua</li>
          <li ng-if="tes.preparation == '3'">{{tes.name}} tiga</li>
        </ul>
      </div>
      <div ng-switch-when="1">
        <ul ng-repeat="tes in item.stores | orderBy: 'preparation'">
          <li>{{tes.name}}</li>
        </ul>
      </div>
    </div>
  </body>
</html>

https://plnkr.co/edit/phpaP3oZ3sTbHiuAv44w?p=preview

感谢您的回答和意见

Answer 1

你可以将nameItem作为数组，并将名称推入其中，然后使用ng-repeat在标记中显示它。

这是一个简化的答案，您需要添加一个函数来删除名称，并在将其推入数组之前检查名称是否出现。祝你好运

这里有一个更新的plnkr

$scope.namaItem = [];
$scope.klikIseng = function(item){
   $scope.namaItem.push(item.name);
};

html：

<li ng-repeat="name in namaItem track by $index">{{name}}</li>

在Angular中显示所有clickedData项

1 个答案: