选项元素中的 Angular ng-if 和 ng-repeat 不起作用 [英] Angular ng-if inside option element and ng-repeat not working

问题描述

我有应该列出可用货币的选择元素.默认货币的名称前应有前缀默认".出于某种原因，列表中的所有货币都会显示该前缀.

测试 HTML:

<div ng-controller="MainCtrl"><选择><option ng-repeat="rate in rate track by $index"><span ng-if="rate.is_default">默认</span><span>{{rate.name}}</span></选项></选择>

测试JS:

var app = angular.module("testApp", []);app.controller("MainCtrl", function($scope){$scope.rates = [{ 'name': 'dolar', 'is_default': true},{'名称':'磅'，'is_default':false}，{ 'name': 'euro', 'is_default': false}];});

jsFiddle

解决方案

你不能在选项标签中使用 HTML 标签，但你可以这样做:

{{ rate.is_default ?'默认' : '' }} {{rate.name}}</选项>

小提琴

I have select element which should list available currencies. Default currency should have prefix "Default" before its name. For some reason, that prefix is showing for all currencies in the list.

Test HTML:

<div ng-app="testApp">
  <div ng-controller="MainCtrl">
     <select>
        <option ng-repeat="rate in rates track by $index">
            <span ng-if="rate.is_default">Default</span>
            <span>{{rate.name}}</span>
        </option>
     </select>
  </div>
</div>

TEST JS:

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

app.controller("MainCtrl", function($scope){

$scope.rates = [
    { 'name': 'dolar', 'is_default': true},
    { 'name': 'pound', 'is_default': false},
    { 'name': 'euro', 'is_default': false}
];

});

jsFiddle

解决方案

You can't use HTML tags in an option tag but you can do something like this:

<option ng-repeat="rate in rates track by $index">
    {{ rate.is_default ? 'default' : '' }} {{rate.name}}
</option>

Fiddle

这篇关于选项元素中的 Angular ng-if 和 ng-repeat 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！