Question

我正在尝试通过下拉列表中的选定选项填充链接。我不知道如何从about选项中获取值，而不是重复它。

<div ng-app="" ng-init="horsepower=[
{hp:'15',value:'https://www.compressorworld.com/15-hp-rotary-screw-air-compressor-system-230-3-60-total-air-system.html'},
{hp:'20',value:'https://www.compressorworld.com/20-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html'}]">


<select>
  <option ng-repeat="x in horsepower" value="{{ x.value}}" ng-model="hp">{{ x.hp}}</option>
</select>
<br/><br/>
<!-- get the selected value of select -->
<a ng-href="{{}}">
buy
</a>

</div>

https://jsfiddle.net/blynn17/171g1x2z/1/

Answer 1

最好在ng-options代码中使用select，并使用ng-model来调用href

中的所选值

<select ng-options="x as x.hp for x in horsepower" value="{{ x.value}}" ng-model="hp">

演示 https://jsfiddle.net/heshamElghndour/bhedvue7/

Answer 2

试试这个。

＆＃13;

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
$scope.test = function(value){
  $scope.href= value;
  
  }
  
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" ng-init="horsepower=[
{hp:'15',value:'https://www.compressorworld.com/15-hp-rotary-screw-air-compressor-system-230-3-60-total-air-system.html'},
{hp:'20',value:'https://www.compressorworld.com/20-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html'}]">

<select ng-model="hp" ng-options="x.value as x.hp for x in horsepower" ng-change="test(hp)"></select>

<br/><br/>
<!-- get the selected value of select -->
<a ng-href="{{href}}">
buy
</a>

</div>

＆＃13;

Answer 3

工作fiddle.

使用ngOptions代替ngRepeat，并使用ngModel标记上的select。

Answer 4

所以基本上你把ng-model放在了错误的地方，你应该把它放在select而不是选项上。除此之外你应该在href中使用hp变量，那就是你去的地方！

<div ng-app="" ng-init="horsepower=[
{hp:'15',value:'https://www.compressorworld.com/15-hp-rotary-screw-air-compressor-system-230-3-60-total-air-system.html'},
{hp:'20',value:'https://www.compressorworld.com/20-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html'}]">


<select  ng-model="hp">
  <option ng-repeat="x in horsepower" value="{{ x.value}}">{{ x.hp}}</option>
</select>
<br/><br/>
<!-- get the selected value of select -->
<a href="{{hp}}">
buy {{hp}}
</a>

</div>

您可以详细了解角度并在此处选择 - https://docs.angularjs.org/api/ng/directive/select

Answer 5

与上述相似但略显清洁

<div ng-app="" ng-init="horsepower=[
{hp:'15',value:'https://www.compressorworld.com/15-hp-rotary-screw-air-compressor-system-230-3-60-total-air-system.html'},
{hp:'20',value:'https://www.compressorworld.com/20-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html'}]">


<select ng-options="x.hp for x in horsepower" ng-model="hp"></select>
<br/><br/>
<!-- get the selected value of select -->
<a ng-href="{{hp.value}}">
buy
</a>
</div>

angular get selected option value并插入链接

5 个答案: