我可以将ng-model设置为两个值吗?

时间:2017-06-06 05:14:37

标签: javascript html angularjs angular-ngmodel

我有一个输入

<input type="text" ng-model="choice.text">

choice.text在对象选择中创建新文本属性的位置。这允许我将输入的内容发送到不同的页面。虽然此功能有效,但我还想添加另一个功能,即在页面上实时显示和更新输入内容。 this效果好的东西。

不幸的是,ng-model已设置为choice.text。有没有办法可以将两个值设置为一个ng-model?它可能看起来像这样:

<input type="text" ng-model="choice.text name"></p>
<p ng-bind="name"></p>

如果没有,是否有另一种方法可以达到这种效果?

编辑:对于那些想知道的人,当我尝试<p ng-bind="choice.text"></p>时,由于某种原因它不起作用。

编辑2:为了问题,我简化了代码。以下是更多细节的实际代码:

<div class ="ask-container">
    <div ng-switch="cbstate">
      <div ng-switch-when="not-pressed">
        <h1>Choose between... </h1> <!-- I would like to add the dynamic element here -->
      </div>
      <div ng-switch-when="pressed">
        <h1>Hi</h1>
      </div>
    </div>
    <form role="form" ng-submit="submitChoice()">
      <div class="input" ng-repeat="choice in poll.options">
        <input type="text"  ng-model="choice.text" placeholder="Choice {{$index+1}}"><br>
      </div>
      <button class="add" type="button" ng-click="addChoice()">+</button>
      <button class="create" type="submit">Create</button>
    </form>
</div>

编辑3:相同的代码,但使用ng-bind:

<div class ="ask-container">
    <div ng-switch="cbstate">
      <div ng-switch-when="not-pressed">
        <h1>Choose between... </h1>
      </div>
      <div ng-switch-when="pressed">
        <h1>Hi</h1>
      </div>
    </div>
    <form role="form" ng-submit="submitChoice()">
      <div class="input" ng-repeat="choice in poll.options">
        <input type="text"  ng-model="choice.text" ng-change="temp=choice.text" placeholder="Choice {{$index+1}}"><br>
      </div>
      <button class="add" type="button" ng-click="addChoice()">+</button>
      <button class="create" type="submit">Create</button>
    </form>
    <p ng-bind="temp"></p>
    <p ng-bind="choice.text"></p>
</div>

注意:有人说ng-repeat可能会影响我的范围。当你尝试解决我的问题时,请记住这一点。

3 个答案:

答案 0 :(得分:2)

这是不可接受的吗?

{{1}}

答案 1 :(得分:1)

使用 ng-change 更新其他型号

<input type="text" 
       ng-model="choice.text" 
       ng-change="temp=choice.text"/> 

现在进行测试,请使用:

<p ng-bind="temp"></p>
<p ng-bind="choice.text"></p>

答案 2 :(得分:1)

  

目前,仅list[0]。最终我会希望他们都出现在列表中,但我可以自己做。现在我只想在bind中显示第一个输入。

让第一个列表出现在bind中:

<div class="input" ng-repeat="choice in poll.options">
  <input type="text"  ng-model="choice.text" placeholder="Choice {{$index+1}}" />
  <br>
</div>

<p ng-bind="poll.options[0].text"></p>

<div>中的每个ng-repeat都有自己的子范围,choice属性设置为poll.options[0]poll.options[1]poll.options[2]等只需在父范围内使用这些值。