I am new to AngularJS and trying to build an AngularJS practice app, in which, the user will concatenate a url from multiple inputs, i.e. protocol, domain, path, param1, param2, param3... etc.
我是刚接触AngularJS的人,正在尝试构建一个AngularJS实践应用程序,在这个应用程序中,用户将从多个输入连接一个url,即协议、域、路径、param1、param2、param3……等。
And the app will create a link to the url:
app会创建到url的链接:
<a>{{protocol}}://{{domain}}{{path}}?{{param1}}&{{param2}}&{{param3}}</a>
Above url is used twice. Once on the href attribute, as well as the actual text. Now what I want to do is something like:
上面的url使用了两次。一旦在href属性,以及实际的文本。现在我想做的是:
<a href="{{url}}">{{url}}</a>
But I am not sure where to assign url. I tried below, and it worked, but doesn't seem correct.
但是我不确定在哪里分配url。我在下面试了试,它成功了,但似乎不正确。
<a href='{{url = protocol+"://"+domain+path+"?"+param1+"&"+param2+"&"+param3}}'>{{url}}</a>
Assuming that url
is used many times in the app, where would be the most appropriate place to assign url
?
假设在应用程序中多次使用url,那么在哪里指定url才是最合适的位置呢?
3 个解决方案
#1
23
You shouldn't assign scope variables in the view (the HTML) - it's only for reading them.
您不应该在视图(HTML)中分配范围变量——它只用于读取它们。
To make a new variable from inputs, add a ng-model to each of them and then in the controller define a method that makes a $scope variable from them e.g.
要从输入中创建一个新变量,请向每个输入中添加一个ng-model,然后在控制器中定义一个方法,该方法从输入中生成一个$scope变量,例如。
Your HTML form:
你的HTML表单:
<div ng-controller="MyCtrl">
<input type="text" ng-model="urlParts.protocol">
<input type="text" ng-model="urlParts.domain">
<!-- etc -->
<a ng-href="{{makeUrl()}}">{{makeUrl()}}</a>
</div>
JS:
JS:
function MyCtrl($scope) {
$scope.urlParts = {};
$scope.urlParts.protocol = "";
$scope.urlParts.domain = "";
// etc...
// These values will be updated when the user types in the input boxes
$scope.makeUrl = function() {
return $scope.urlParts.protocol + "://" + $scope.urlParts.domain + $scope.urlParts.path + "?" + $scope.urlParts.param1 + "&" + $scope.urlParts.param2 + "&" + $scope.urlParts.param3;
}
}
#2
1
Another similar approach is to use ng-init directive to create a dynamic property which represents the concatenation of all those properties. You can call the function or just concatenate inline.
另一种类似的方法是使用ng-init指令创建一个动态属性,该属性表示所有这些属性的连接。您可以调用该函数,也可以将其连接到内联。
<a ng-init="urlParts.url=makeUrl()"
ng-href="urlParts.url">{{urlParts.url}}
</a>
<a ng-init="urlParts.url=urlParts.protocol + '://' + $scope.urlParts.domain..."
ng-href="urlParts.url">{{urlParts.url}}
</a>
Reference: http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html
参考:http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html
Try It: http://plnkr.co/edit/PSvwCE?p=info
试一试:http://plnkr.co/edit/PSvwCE?p=info
#3
0
If you want to bind a dynamic url with href
then you can manipulate you URL in ng-click
or ng-mousedown
event and bind to target element.
如果您想用href绑定一个动态url,那么您可以在ng-click或nmousedown事件中操作url并绑定到目标元素。
JS:
JS:
var goToLinkedPage = function (event, basePath, param1, param2, param 3) {
var newState = basePath + "?" + param1 + "&" + param2 + "&" + param3;
jQuery(event.target).attr('href',newState);
};
HTML:
HTML:
<a ng-mousedown="goToLinkedPage($event, basePath, param1, param2, param3)"> Click Here </a>
#1
23
You shouldn't assign scope variables in the view (the HTML) - it's only for reading them.
您不应该在视图(HTML)中分配范围变量——它只用于读取它们。
To make a new variable from inputs, add a ng-model to each of them and then in the controller define a method that makes a $scope variable from them e.g.
要从输入中创建一个新变量,请向每个输入中添加一个ng-model,然后在控制器中定义一个方法,该方法从输入中生成一个$scope变量,例如。
Your HTML form:
你的HTML表单:
<div ng-controller="MyCtrl">
<input type="text" ng-model="urlParts.protocol">
<input type="text" ng-model="urlParts.domain">
<!-- etc -->
<a ng-href="{{makeUrl()}}">{{makeUrl()}}</a>
</div>
JS:
JS:
function MyCtrl($scope) {
$scope.urlParts = {};
$scope.urlParts.protocol = "";
$scope.urlParts.domain = "";
// etc...
// These values will be updated when the user types in the input boxes
$scope.makeUrl = function() {
return $scope.urlParts.protocol + "://" + $scope.urlParts.domain + $scope.urlParts.path + "?" + $scope.urlParts.param1 + "&" + $scope.urlParts.param2 + "&" + $scope.urlParts.param3;
}
}
#2
1
Another similar approach is to use ng-init directive to create a dynamic property which represents the concatenation of all those properties. You can call the function or just concatenate inline.
另一种类似的方法是使用ng-init指令创建一个动态属性,该属性表示所有这些属性的连接。您可以调用该函数,也可以将其连接到内联。
<a ng-init="urlParts.url=makeUrl()"
ng-href="urlParts.url">{{urlParts.url}}
</a>
<a ng-init="urlParts.url=urlParts.protocol + '://' + $scope.urlParts.domain..."
ng-href="urlParts.url">{{urlParts.url}}
</a>
Reference: http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html
参考:http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html
Try It: http://plnkr.co/edit/PSvwCE?p=info
试一试:http://plnkr.co/edit/PSvwCE?p=info
#3
0
If you want to bind a dynamic url with href
then you can manipulate you URL in ng-click
or ng-mousedown
event and bind to target element.
如果您想用href绑定一个动态url,那么您可以在ng-click或nmousedown事件中操作url并绑定到目标元素。
JS:
JS:
var goToLinkedPage = function (event, basePath, param1, param2, param 3) {
var newState = basePath + "?" + param1 + "&" + param2 + "&" + param3;
jQuery(event.target).attr('href',newState);
};
HTML:
HTML:
<a ng-mousedown="goToLinkedPage($event, basePath, param1, param2, param3)"> Click Here </a>