2017-02-22 8 views
0

У меня есть список имен и идентификаторов. Я отобразил его с использованием свойства ng-repeat. Я хочу показать соответствующий идентификатор вместе с именем за 1 секунду после щелчка.Как создать «этот» объект в AngularJs?

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

Я создал plunker

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

Теперь, показывающий все идентификаторы в один клик. Пожалуйста помоги.
Спасибо.

+0

https://plnkr.co/edit/VUn28J6jp0j1sX6VuwDK?p=preview –

ответ

2

Try ниже, в HTML:

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

    <head> 
    <script data-require="[email protected]*" 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); 
    }; 

    });