Question

我的表格会打开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": 'john@example.com',
    name: "John",
    lastName: "Doe"
  }, {
    "email": 'mary@example.com',
    name: "elton",
    lastName: "Junior"
  }, {
    "email": 'july@example.com',
    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;
}

http://jsfiddle.net/71rqq1o1/22/

Answer 1

您可以通过检查html文件中的$index语句来实现此目的，例如：像这样：

<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中使用你的viewmodels，只使用对象的纯属性，没有任何逻辑。

<th><a href="{{person.link}}">{{person.name}}</a></th>

如何使第一个链接打开特定链接

1 个答案: