如何在angularjs中显示hide元素?

时间:2014-09-19 05:25:24

标签: javascript angularjs

我正在试图展示95岁的#34; [6] Peter&#34;文本框中的值是hide.But它应显示<button ng-click="show_id(friend.id)">get my id</button>的时间 点击。名称应为ng-model="name",年龄为ng-model="age"

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example42-production</title>



  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>


<script>
angular.module("my_app",[])
.controller("my_ctr",function($scope){

    $scope.show_id=function(index){
        alert(index);
    }
})
</script>
</head>
<body ng-app="my_app" ng-controller="my_ctr">
    <div ng-init="friends = [
    {id:1, name:'John', age:25, gender:'boy'},
    {id:2, name:'Jessie', age:30, gender:'girl'},
    {id:3, name:'Johanna', age:28, gender:'girl'},
    {id:4, name:'Joy', age:15, gender:'girl'},
    {id:5, name:'Mary', age:28, gender:'girl'},
    {id:6, name:'Peter', age:95, gender:'boy'},
    {id:7, name:'Sebastian', age:50, gender:'boy'},
  ]">
    I have {{friends.length}} friends. They are:

    <ul>
      <li  ng-repeat="friend in friends.slice().reverse() ">
        [{{friend.id}}] {{friend.name}} who is {{friend.age}} years old.
        <input type="text" ng-model="name" ng-hide="true">
          <input type="text" ng-model="age" ng-hide="true">
          <input type="text" ng-model="gender" ng-hide="true">
        <button ng-click="show_id(friend.id)">get my id</button>       
      </li>

    </ul>
  </div>
</body>
</html>

但是这段代码无效。

1 个答案:

答案 0 :(得分:2)

试试这个:

  <li  ng-repeat="friend in friends.slice().reverse() ">
    [{{friend.id}}] {{friend.name}} who is {{friend.age}} years old.
    <input type="text" ng-model="friend.name" ng-show="showItem">
      <input type="text" ng-model="friend.age" ng-show="showItem">
      <input type="text" ng-model="friend.gender" ng-show="showItem">
    <button ng-click="showItem=true">get my id</button>       
  </li>