Question

我是Angular的新手，并试图弄清楚如何将ASP.NET应用程序改编为Angular。我需要根据用户所属的组显示与用户不同的链接。我有一个Web API（ASP.NET Web API），我可以调用它来确定用户。我使用以下Angular代码来调用Web API，但我不确定的是下一步该怎么做。如果$scope.userGroupInfo包含用户所属的群组，那么我该如何根据群组在HTML中显示不同的链接？

AngularJS

(function() {

  var app = angular.module("linkSwitcher", []);

  var MainController = function($scope, $http) {

    var onApiCallComplete= function(response) {
      $scope.userGroupInfo = response.data;
    };

    var onError = function(reason) {
      $scope.error = "There was a problem calling the API";
    };

    $scope.getUserGroup = function(userId) {
      $http.get("https://myapi.mysite.com/api/clients/getUserGroup/" + userId)
        .then(onApiCallComplete, onError); 
    };

  };

  app.controller("MainController", MainController);
}());

HTML

<body ng-controller="MainController">
  <form name="GetGroup" ng-submit="getUserGroup()">
    <input type="submit" value="Lookup User Group Link" />
  </form>
</body>

请假设我已正确引用Angular库，并且我只显示调用Angular脚本的HTML部分。

Answer 1

嗯，你想在显示器上改变什么？您可以尝试在标记内使用ng-if=""来显示它，也可以使用ng-class="someObjectMappingClassNameToBoolean"根据某些标记修改类。

Ex :(我不知道您的回复结构）

<div ng-if="userGroupInfo.groupId=== 7" > <a>Show me if userGroupInfo.groupId equals to 7 is true!</a> </div>

或

<div ng-class="{'blue-class': userGroupInfo.isBlue === true, 'error': userGroupInfo.isError === true }" > <a>Blue class added if isBlue is true, error class if isError is true</a></div>

Answer 2

您还可以使用ng-href生成计算的超链接，可以是整体也可以是部分，例如： NG-HREF =＆＃34; HTTP：//path.to/ {{组名}}＆＃34;

如何根据API结果在Angular中显示不同的链接

2 个答案: