2

I am learning to use Angular (1.3.10), I have two input fields that specify the suit and value for a hand of playing card. As you can see from the image below, when I try to hardcode the suit and value, the card shows up fine (one on the right). But when I use ng-model to bind it, the card_value is not displaying correctly although it is picked up by the browser. What am I doing wrong? 

<div ng-app = "cards">
    <form>
        <div>
            <input ng-model = "card_value">
            <span>of</span>
            <input ng-model = "card_suit">
        </div>
    </form>

    <div>
        <p>Entered: {{card_value}} of {{card_suit}}</p>

        <!-- card.value is not binding up perfectly fine -->
        <card value = "{{card_value}}" suit = "{{card_suit}}"></card>
        <!--  -->

        <!-- this shows up perfectly fine -->
        <card value = "5" suit = "Clubs" ></card> 
        <!--  -->
    </div>
</div>

What I see being displayed: enter image description here

Chrome inspector: the part that is highlighted is where ng-binding fails, should be 5 enter image description here

  • `this.pips` is assigned once on directive init and never modified later. To make the binding work it may be `this.getPip = getPip` and then `card.pip` in template may be replaced with `card.getPip()` (the same applies to this.display). The good thing is that the binding will work. The bad thing is that infinite digest may be caused because the binding can't be calculated efficiently. Any way, using ng-repeat for each pip will kill the performance very soon. It's ok if this is a demo but for real app you may want to use premade images for both look and performance. – Estus Flask Sep 10 '16 at 17:33
  • @estus if I use pre made images then I am going to end up with 52 if statements. There has to be a better way –  Sep 10 '16 at 17:54
  • @estus would you mind to put your solution into code, it's a bit hard to follow –  Sep 10 '16 at 18:02
  • Sorry, don't have enough time for quality answer for now. The images can have suitable filenames that allow to substitute them via expression, it's the path of least resistance here, images offer best performance and look. Sure, it can be done in a lot of ways, e.g. input values may be watched with $scope.$watchCollection, and card's inner DOM is updated only on value changes with pure jQuery (that's where it is good), no pip bindings. The point is that ng-repeat affects the performance severely when being used incautiously , and optimizing Angular performance is a tough task for a beginner. – Estus Flask Sep 10 '16 at 18:50
  • I would suggest to separate the question into smaller questions and address one issue at once with smaller pieces of code, there's a higher chance to get a good answer this way (don't forget to link to a bigger question to give a full perspective). – Estus Flask Sep 10 '16 at 18:54

1 Answers1

0

ng-bind has one-way data binding.

ng-model is intended to be put inside of form elements and has two-way data binding You should use ng-bind

  <div ng-bind-html="card_value"></div>

DEMO APP

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • Why use this instead of ng-model? –  Sep 10 '16 at 04:04
  • @b11 you cannot use ng-model on a div , you can use on the following as per the documentation The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive. – Sajeetharan Sep 10 '16 at 04:14
  • in the example [ng-bind](https://docs.angularjs.org/api/ng/directive/ngBind), they still put a `ng-model` on the input and a `ng-bind` in the span element. How would I use it in my case, since card is a directive I created and not a div –  Sep 10 '16 at 04:38
  • as in I cannot do `` –  Sep 10 '16 at 04:39
  • Not working for me, the values are not binded with input boxes –  Sep 10 '16 at 05:07
  • http://jsfiddle.net/sajeetharan/wwaweb09/8/ give team viewer.i can check – Sajeetharan Sep 10 '16 at 05:12