Question

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

选择正确填充。

当我查看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/

Answer 1

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

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

<强> plunker

Answer 2

您可以使用ng-options代替ng-repeat上的<option>来解决此问题，以便AngularJs自动管理<option>值和标签：

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

jsFiddle

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

<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

字符串比较不在指令中工作

2 个答案: