我想在单击按钮时显示年龄旁边的别名。或者当我点击一个名字时,我希望除了那个人的年龄之外还要显示别名。
<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>
答案 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>