如何在 AngularJs 中创建“this”对象？答案

【问题标题】：How to create "this" object in AngularJs?如何在 AngularJs 中创建“this”对象？
【发布时间】：2017-02-22 14:47:59
【问题描述】：

我有一个姓名和身份证的列表。我已经用 ng-repeat 属性显示了它。我想在点击时在 1 秒内显示相应的 ID 和名称。

$scope.showFn = function() {
  $scope.showPopup = true;
  $timeout(function(){
    console.log("timeout");
    $scope.showPopup = false;
  }, 1000);
};

我创建了一个 plunker

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

现在只需单击即可显示所有 ID。请帮忙。
谢谢。

【问题讨论】：

plnkr.co/edit/VUn28J6jp0j1sX6VuwDK?p=preview

标签： angularjs

【解决方案1】：

用下面的 HTML 试试：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="main">
    <ul>
      <li ng-repeat="item in items">
        <a href="#" ng-click="showFn(item.id)">{{item.name}}</a>
        <span ng-show="showPopup && item.id == shownId">{{item.id}}</span>
      </li>
    </ul>
  </body>

</html>

控制器如下所示：

var app = angular.module('app', [])
  .controller('main', function($scope, $timeout) {
    $scope.items = [{
      "name": "one",
      "id": "1"
    }, {
      "name": "two",
      "id": "2"
    }, {
      "name": "three",
      "id": "3"
    }, {
      "name": "four",
      "id": "4"
    }, {
      "name": "five",
      "id": "5"
    }, {
      "name": "six",
      "id": "6"
    }, {
      "name": "seven",
      "id": "7"
    }]

    $scope.showFn = function(Item) {
      $scope.shownId = Item;
      $scope.showPopup = true;
      $timeout(function() {
        console.log("timeout");
        $scope.showPopup = false;
      }, 1000);
    };

  });

【讨论】：