角度ng-href与Split方法

Question

I have a recursive variable with value

path = <d:URL>http://www.google.com, Google</d:URL>

I want to bind this path in to angular component. I am trying to use the below method to bind the ng-href value.

<a ng-href="{{path.URL.split(",")[0]}}" target="_blank">{{path.URL.split(",")[1]}}</a>

It seems this breaks with the href but the split gets evaluated for the link title. How can I resolve this.

Thanks.

Answer 1

You can create a function to perform the split functionality. So try like this

HTML :

 <a ng-href="{{createURL()}}" target="_blank">{{path.URL.split(",")[1]}}</a>

JS

$scope.createURL=function(path){
  return path.URL.split(",")[0]
}

Answer 2

create a function and perform the split operations

  $scope.getSplitVal = function(url){
     return url.split(",")[1]
  }

 angular.module("app",[]) .controller("ctrl",function($scope){ $scope.path = "<d:URL>http://www.google.com, Google</d:URL>" $scope.getSplitVal = function(url){ return url.split(",")[1] } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <a ng-href="{{getSplitVal(path)}}" target="_blank">{{getSplitVal(path)}}</a> </div> 

Answer 3

I think you need to do any string manipulations into controller and not in HTML. Its not good practice.

The string "<d:URL>http://www.google.com, Google</d:URL>" should go to:

var path = "<d:URL>http://www.google.com, Google</d:URL>";

 $scope.path = {
   URL:{
     value:path.split(",")[0].replace("<d:URL>", ""),
     name: path.split(",")[1].replace("</d:URL>", "")
   }
 };

So your HTML will look like:

<a ng-href="{{path.URL.value}}" target="_blank">{{path.URL.name}}</a>

Answer 4

Problem caused by double quotes that breaks ng-href when html is outputted but not handled by angular and it becomes:

ng-href="{{path.URL.split("

So simply change double quotes inside of split to single quotes:

<ul ng-controller="PathsController as $ctrl">
  <li ng-repeat="path in $ctrl.paths">
    <a 
      ng-href="{{ path.URL.split(',')[0].replace('<d:URL>', '') }}"
    >
      {{ path.URL.split(",")[1].replace('</d:URL>', '') }}
    </a>
  </li>
</ul>