Question

我有以下＆lt; select＆gt;元件：＆lt; select ng-model =“pTitle”＆gt; ＆lt; option value =“Mr。”＆gt; Mr.＆lt; / option＆gt; ＆lt; option value =“Mrs。”＆gt; Mrs.＆lt; / option＆gt; ＆lt; option value =“Ms。”＆gt; Ms.＆lt; / option＆gt; ＆LT; /选择＆GT; 选择一个选项后，我正在更改文本。＆lt;节＆GT; 问候，＆lt; span ng-bind =“pTitle”＆gt;＆lt; / span＆gt;琼斯！＆LT; /节＆gt; 这非常有效。现在我想要做的是根据ng-bind更改更改其他文本。例如，在＆lt; section＆gt;中下面，根据他们的选择，我会在他和她之间切换：＆lt;节＆GT; 根据＆lt; span ng-bind =“pTitle”＆gt;＆lt; / span＆gt;琼斯，他的**（或她）**编码能力需要一些工作！＆LT; /节＆gt; 完成这项工作的正确方法是什么？提前致谢。

Answer 1

您可以使用自定义filter将所选值转换为想要的代词。

像：

angular.module('myApp').filter('possessivePronoum', function() {
  return function(title) {
    return title === 'Mr.' ? 'his' : 'her';
  };
});

并像这样使用它：

<section>
  According to <span ng-bind="pTitle"></span> Jones, <span ng-bind="pTitle | possessivePronoum"></span> coding ability needs some work!
</section>

警告：未经测试的代码

Answer 2

您可以使用 ng-if

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <select ng-model="pTitle">
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Ms.">Ms.</option>
  </select>

  <section>
    According to <span ng-bind="pTitle"></span> Jones,  <span ng-if="pTitle=='Mr.'">His</span><span ng-if="pTitle=='Mrs.'||pTitle=='Ms.'">Her</span> coding ability needs some work!
  </section>
</div>

更新：Angular 1.1.5添加了一个三元运算符，所以现在我们可以简单地写一下

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <select ng-model="pTitle">
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Ms.">Ms.</option>
  </select>

  <section>
    According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' ? 'His' : 'Her' }} coding ability needs some work!
  </section>
</div>

或以前的版本

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app>
  <select ng-model="pTitle">
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Ms.">Ms.</option>
  </select>

  <section>
    According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' && 'His' || 'Her' }} coding ability needs some work!
  </section>
</div>

<span>基于<select>选项的文本更新

2 个答案: