如何在angular js中顯示hide元素？

Question

我試圖在隱藏的文本框中顯示“ [6]誰是95歲的彼得”值。但是，當<button ng-click="show_id(friend.id)">get my id</button>單擊。 名稱應為ng-model="name" ，age為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>

但對於此代碼不起作用。

Answer 1

嘗試這個：

  <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>

如何在angular js中顯示hide元素？

問題描述

1 個解決方案

解決方案1
2 已采納 2014-09-19 05:28:51

如何在angular js中顯示hide元素？

問題描述

1 個解決方案

解決方案1 2 已采納 2014-09-19 05:28:51

解決方案1
2 已采納 2014-09-19 05:28:51