I have an input
<input type="text" ng-model="choice.text">
Where choice.text
creates a new text property in the object choice. This allows me to send the contents of the input to different page. While this feature works, I would also like to add another feature where the content of the input is displayed and updated in real time on the page. Something to this effect.
Unfortunately, ng-model
is already set to choice.text
. Is there a way I can have set two values to one ng-model
? It would perhaps look like this:
<input type="text" ng-model="choice.text name"></p>
<p ng-bind="name"></p>
If not, is there another way to achieve this effect?
EDIT: For those wondering, when I try <p ng-bind="choice.text"></p>
it doesnt work for some reason.
EDIT 2: I simplified the code for the sake of the question. Here is the actual code for more detail:
<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>
EDIT 3: Same code, but with the 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>
Note: Somebody said that the ng-repeat may be messing with my scope. Maybe keep that in mind as you try and fix my problem.
I have an input
<input type="text" ng-model="choice.text">
Where choice.text
creates a new text property in the object choice. This allows me to send the contents of the input to different page. While this feature works, I would also like to add another feature where the content of the input is displayed and updated in real time on the page. Something to this effect.
Unfortunately, ng-model
is already set to choice.text
. Is there a way I can have set two values to one ng-model
? It would perhaps look like this:
<input type="text" ng-model="choice.text name"></p>
<p ng-bind="name"></p>
If not, is there another way to achieve this effect?
EDIT: For those wondering, when I try <p ng-bind="choice.text"></p>
it doesnt work for some reason.
EDIT 2: I simplified the code for the sake of the question. Here is the actual code for more detail:
<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>
EDIT 3: Same code, but with the 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>
Note: Somebody said that the ng-repeat may be messing with my scope. Maybe keep that in mind as you try and fix my problem.
Share Improve this question edited Jun 6, 2017 at 6:02 Ethernetz asked Jun 6, 2017 at 5:14 EthernetzEthernetz 9784 gold badges16 silver badges35 bronze badges 4-
1
Why not
<p ng-bind="choice.text"></p>
? – rocambille Commented Jun 6, 2017 at 5:22 -
can you add in the
ng-bind
part also? – Icycool Commented Jun 6, 2017 at 5:58 -
With the
ng-repeat="choice in list"
there will belist.length
inputs and choices. Whichchoice.text
do you want bind outside theng-repeat
? – georgeawg Commented Jun 6, 2017 at 6:21 - For now, just list[0]. Eventually I will want them all to appear in a list but I can do that myself. For now I just want the first input to display in the bind. – Ethernetz Commented Jun 6, 2017 at 6:23
3 Answers
Reset to default 2For now, just
list[0]
. Eventually I will want them all to appear in a list but I can do that myself. For now I just want the first input to display in the bind.
To have the first of the list appear in the 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>
Each <div>
in the ng-repeat
has its own child scope with the choice
property set to poll.options[0]
, poll.options[1]
, poll.options[2]
, etc. Simply use those values in the parent scope.
Is this not acceptable?
<input type="text" ng-model="choice.text"></p>
<p ng-bind="choice.text"></p>
Use ng-change to update other model
<input type="text"
ng-model="choice.text"
ng-change="temp=choice.text"/>
Now for testing, use:
<p ng-bind="temp"></p>
<p ng-bind="choice.text"></p>