我有一些表可以打开html中定义的链接，但是我想使第一个链接打开一个不同的链接，例如：john.com，这可能吗？
因此得名：John将打开john.com
的HTML：
<div ng-controller="MyCtrl">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in data">
<th><a href="">{{person.name}}</a></th>
<th>{{person.lastName}}</th>
<th ng-click="colorRow($index)" ng-class="{yellow : $index == row}" ng-show="$index != row ">{{person.email}}</th>
<th ng-show="$index == row" class="yellow"> Cliked</th>
</tr>
</tbody>
</table>
</div>
</div>
js：
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.row = -1;
$scope.data = [{
"email": '[email protected]',
name: "John",
lastName: "Doe"
}, {
"email": '[email protected]',
name: "elton",
lastName: "Junior"
}, {
"email": '[email protected]',
name: "mark",
lastName: "Junior"
}, ]
$scope.colorRow = function(index) {
$scope.row = index;
console.log("Hey Joe", index)
}
}
CSS：
.odd {
background-color: white;
}
.even {
background-color: grey;
}
.yellow {
background-color: yellow;
color: green;
}
您可以通过检查$indexhtml文件中的语句来实现此目的，例如：
<th><a href="{{$index === 0 ? 'http://google.com' : 'http://'+person.name}}">{{person.name}}</a></th>
但是我建议您不要使用html文件中的逻辑，而在html中使用诸如viewmodels之类的东西。您必须分别在控制器中整合数据。
像这样的东西：
function toViewModel(data) {
return data.map((d, i) => {
let obj = {};
if (i === 0) {
obj.link = "http://google.com";
} else {
obj.link = `http://${d.name}.com`;
}
obj.name = d.name; // you can use some libs to extend objects (e.g. lodash) instead of reassigning each attr
obj.lastName = d.lastName;
obj.email = d.email;
return obj;
});
}
$scope.viewdata = toViewModel(mydata);
并在html中使用视图模型，仅使用对象的纯属性，而无需任何逻辑。
<th><a href="{{person.link}}">{{person.name}}</a></th>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句