字符串比较不适用于指令

I'm not sure why the selectedAction == 'Incomplete' part is not working correctly. The div is not showing, but I can see that {{selectedAction}} in the span tags is showing 'Incomplete'.

我不确定为什么selectedAction =='Incomplete'部分无法正常工作。 div未显示，但我可以看到span标记中的{{selectedAction}}显示为“未完成”。

The select is populating correctly.

选择正确填充。

There does seem to be leading and trailing whitespace around the Incomplete text when I look in the dom. The JSON for actionTypes is just the following, so I'm not sure where the whitespace is coming from. Not sure what if I need to trim something, or what I'm overlooking here.

当我查看dom时，不完整文本周围似乎有前导和尾随空格。 ActionTypes的JSON就是以下内容，所以我不确定空白的来源。不知道如果我需要修剪一些东西，或者我在这里俯瞰的东西。

    $scope.actionTypes = [
           { "ActionTypeID": 1, "ActionText": "Incomplete" },
           { "ActionTypeID": 2, "ActionText": "Complete" }
    ];

<select class="form-control form-small-auto" style="width:100%" data-ng-model="selectedAction">
          <option data-ng-repeat="action in actionTypes">
               {{action.ActionText}}
          </option>
</select>

<span>
     {{selectedAction}}  --- this shows 'Incomplete'
</span>

'This div is not showing
<div style="padding-top: 5px;" data-ng-show="selectedAction == 'Incomplete'">

</div>

JSFiddle: http://jsfiddle.net/0qmtkLh5/3/

JSFiddle：http：//jsfiddle.net/0qmtkLh5/3/

2 个解决方案

#1

You need to define the value attribute from the <option> tag, otherwise the browser will use the content of that tag as value, and in that case the content will include white spaces and break lines (\n). That's why the texts don't match.

您需要从标记定义value属性，否则浏览器将使用该标记的内容作为值，在这种情况下，内容将包含空格和换行符（\ n）。这就是文本不匹配的原因。

<option data-ng-repeat="action in actionTypes" value="{{action.ActionText}}">
  {{action.ActionText}}
</option>

plunker

plunker

#2

You can fix this by using ng-options instead of an ng-repeat on <option>, so that AngularJs automatically manages the <option> values and labels:

您可以通过在上使用ng-options而不是ng-repeat来解决此问题，以便AngularJs自动管理值和标签：

<select style="width:100%" data-ng-model="selectedAction" ng-options="action.ActionText as action.ActionText for action in actionTypes">

jsFiddle

的jsfiddle

---

Personally, I prefer selecting the entire object instead of the label used to represent it:

就个人而言，我更喜欢选择整个对象而不是用于表示它的标签：

<select style="width:100%" data-ng-model="selectedAction" ng-options="action as action.ActionText for action in actionTypes">
...
{{selectedAction.ActionText}}
...
<div data-ng-show="selectedAction.ActionText == 'Incomplete'">

jsFiddle

的jsfiddle