angularJS - ng-if and ng-model

angularJS - ng-if and ng-model

本文关键字：ng-model and ng-if angularJS      更新时间：2023-09-26

我试图根据我的angular应用程序中选择的值显示字段。它应该非常简单:当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>

由于某些原因，它不起作用。这是柱塞:http://plnkr.co/edit/GcJNePs9zvkejnIATTiw?p=preview

我怎样才能使它工作?

谢谢

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

然后您需要使用ng-show和!=来动态显示您的标签。

你的活塞应该工作在这个:

<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>

Plunker here: http://plnkr.co/edit/meqpbOVXrH4ANtQlxdoy?p=preview

你的Angular版本不支持ng-if。

试题:

<div class="form-aside" ng-show="newJob.country != 'Remote'">

或者将你的Angularjs版本更新到1.2.15，最新的稳定版本。
相关文章：