AngularJS:想要在单击按钮后显示“别名”

时间:2017-01-01 23:23:31

标签: angularjs

我想在单击按钮时显示年龄旁边的别名。或者当我点击一个名字时,我希望除了那个人的年龄之外还要显示别名。

 <html ng-app="myApp">
    <head>
    <script src="https://code.jquery.com/jquery-3.0.0.js">
    </script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"  rel="stylesheet"></script>

    <style> 
        li {color: orange; 
            background-color: black;
            padding: 5px;
            text-align: center;

        }
    </style>

    <script>
        var myApp= angular.module("myApp",[]);
        myApp.controller("myCtrl", function($scope){
            $scope.residents= [       
              {fname:"Jekin", lname:"Rajal", age:29, alias:"Jek"},
              {fname:"Jaydip", lname:"Vasoya", age:24, alias:"JD"},
              {fname:"Melvin", lname:"Matthew", age:23, alias:"Anna"}]
        });
    </script>

    </head>
    <body>
    <div class="container-fluid" ng-controller="myCtrl" >
        <ul>
        <li type="none" ng-repeat="resident in residents">{{resident.fname}} {{resident.lname}}, {{resident.age}} </li>
        </ul>
        <br/>
        <button type="button" class="btn btn-info" ng-click="fucn"> Click to show alias</button>


    </div>
    </body> 

    </html>

1 个答案:

答案 0 :(得分:1)

您可以尝试在import React from 'react' class Row extends React.Component{ constructor(props){ super(props) this.tick = this.tick.bind(this); this.delay = this.delay.bind(this); this.state = { cells: this.props.cell } } tick(){ this.state.cells.map((cell) => { this.delay(cell) }) } delay(cell){ setInterval(() => { cell.playing = true },2000) } render(){ return( <div> <div>hello</div> <button onClick={this.tick}>Click </button> </div> ) } } export default Row; 内包装别名,该用户在用户点击按钮后有条件地显示:

<div>

然后在你的控制器中为按钮点击实现一个处理函数:

<ul>
    <li type="none" ng-repeat="resident in residents">
        {{resident.fname}} {{resident.lname}}, {{resident.age}}
        <div ng-show="showAlias">{{resident.alias}}</div>
    </li>
</ul>