angularJS-ng-if和ng-model

鱼叉鱼

我正在尝试根据我的角度应用程序中的选择值显示一个字段。它应该非常简单:当newJob.country ==='Remote'时,我希望我的'city'字段消失:

HTML:

  <body ng-app>
        <div class="form-aside">
          <label>Location</label>
          <select ng-model="newJob.country" class="form-control">
            <option>Remote</option>
            <option>France</option>
            <option>UK</option>
          </select>
        </div>
        <div class="form-aside" ng-if="newJob.country !== 'Remote'">
          <label>City</label>
        </div>
  </body>

由于某种原因,它不起作用。这是the人:http ://plnkr.co/edit/GcJNePs9zvkejnIATTiw?p=preview

我该如何工作?

谢谢

蒂莫西·珍妮

您需要value为每个<option>标签定义一个

然后,您需要使用ng-showwith!=动态显示或不显示标签。

您的pl夫应该使用以下方法:

<body ng-app>
    <div class="form-aside">
      <label>Location</label>
      <select ng-model="newJob.country" class="form-control">
        <option value="remote">Remote</option>
        <option value="france">France</option>
        <option value="uk">UK</option>
      </select>
    </div>
    <div class="form-aside" ng-show="newJob.country != 'remote'">
      <label>City</label>
    </div>
</body>

请在此处插入:http ://plnkr.co/edit/meqpbOVXrH4ANtQlxdoy?p=preview

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

angularJS和ng-model奇怪的行为

来自分类Dev

AngularJs中ng-model的Getter和Setter支持

来自分类Dev

使用angularJS ng-repeat和ng-model进行动态多列过滤

来自分类Dev

ng-controller ng-model和$ scope如何在各处使用angularjs变量

来自分类Dev

带有ng-model和ng-options的AngularJS <select>在元素删除时被破坏

来自分类Dev

ng-controller ng-model和$ scope如何在各处使用angularjs变量

来自分类Dev

带有ng-model和ng-options的AngularJS <select>在元素删除时被破坏

来自分类Dev

使用angularJS ng-repeat和ng-model进行动态多列过滤

来自分类Dev

AngularJS:ng-repeat中的动态ng-model名称和显示输入字段之和

来自分类Dev

带有ng-repeat和ng-model的AngularJS添加/删除功能

来自分类Dev

AngularJS:ng-model中的变量

来自分类Dev

AngularJS-ng-model无法从javascript更新

来自分类Dev

angularjs:ng-model双对象

来自分类Dev

angularjs更改ng-model更改的视图

来自分类Dev

AngularJS的ng-model ICM textarea

来自分类Dev

AngularJS。禁用生成,以ng-model编写

来自分类Dev

如何声明动态ng-model?angularjs

来自分类Dev

在AngularJS中对ng-model进行连接

来自分类Dev

AngularJS:使ng-model在ng-repeat之外可用

来自分类Dev

在ng-repeat angularjs中使用ng-model

来自分类Dev

ng-repeat中的AngularJS项作为ng-model

来自分类Dev

AngularJS:ng-repeat中的ng-model绑定

来自分类Dev

AngularJS Select和ng-options:仅显示属性时,我可以绑定并反对ng-model吗?

来自分类Dev

(AngularJS) ng-options 尽管有 ng-model 和以前的工作语法,但没有填充

来自分类Dev

AngularJS Ng重复和重复

来自分类Dev

ng-model和data-ng-model之间的区别

来自分类Dev

为什么在AngularJS的输入中需要同时指定名称和ng-model?

来自分类Dev

AngularJS:如何使所有ng-model成为字符串。JavaScript和长整数

来自分类Dev

AngularJs和ASP.NET MVC 5-ng-model覆盖文本框值

Related 相关文章

  1. 1

    angularJS和ng-model奇怪的行为

  2. 2

    AngularJs中ng-model的Getter和Setter支持

  3. 3

    使用angularJS ng-repeat和ng-model进行动态多列过滤

  4. 4

    ng-controller ng-model和$ scope如何在各处使用angularjs变量

  5. 5

    带有ng-model和ng-options的AngularJS <select>在元素删除时被破坏

  6. 6

    ng-controller ng-model和$ scope如何在各处使用angularjs变量

  7. 7

    带有ng-model和ng-options的AngularJS <select>在元素删除时被破坏

  8. 8

    使用angularJS ng-repeat和ng-model进行动态多列过滤

  9. 9

    AngularJS:ng-repeat中的动态ng-model名称和显示输入字段之和

  10. 10

    带有ng-repeat和ng-model的AngularJS添加/删除功能

  11. 11

    AngularJS:ng-model中的变量

  12. 12

    AngularJS-ng-model无法从javascript更新

  13. 13

    angularjs:ng-model双对象

  14. 14

    angularjs更改ng-model更改的视图

  15. 15

    AngularJS的ng-model ICM textarea

  16. 16

    AngularJS。禁用生成,以ng-model编写

  17. 17

    如何声明动态ng-model?angularjs

  18. 18

    在AngularJS中对ng-model进行连接

  19. 19

    AngularJS:使ng-model在ng-repeat之外可用

  20. 20

    在ng-repeat angularjs中使用ng-model

  21. 21

    ng-repeat中的AngularJS项作为ng-model

  22. 22

    AngularJS:ng-repeat中的ng-model绑定

  23. 23

    AngularJS Select和ng-options:仅显示属性时,我可以绑定并反对ng-model吗?

  24. 24

    (AngularJS) ng-options 尽管有 ng-model 和以前的工作语法,但没有填充

  25. 25

    AngularJS Ng重复和重复

  26. 26

    ng-model和data-ng-model之间的区别

  27. 27

    为什么在AngularJS的输入中需要同时指定名称和ng-model?

  28. 28

    AngularJS:如何使所有ng-model成为字符串。JavaScript和长整数

  29. 29

    AngularJs和ASP.NET MVC 5-ng-model覆盖文本框值

热门标签

归档