Angular 2-way binding not working but expression does - javascript

I have the following:
<div class="row" ng-repeat="item in repo.items">
<div class="col-md-6 segment">
<div class="display-text animation editable">
<pre><span class="contenteditable"
tabindex="0"
contenteditable="true"
ng-model="item.text"></span></pre>
</div>
</div>
</div>
The 2-way binding isn't working for ng-model="item.text", but if I use the expression {{item.text}} within the same iteration it works as it should.
Any specific reason I'm missing which is causing this behavior?

ng-model used for input tag when you want to use only for view you should use ng-bind.
So you should use ng-bind="item.text" or {{item.text}} instead of ng-model="item.text" in span tag.
<pre>
<span class="contenteditable"
tabindex="0"
contenteditable="true"
ng-bind="item.text"></span>
</pre>
or
<pre>
<span class="contenteditable"
tabindex="0"
contenteditable="true">{{item.text}}</span>
</pre>

Related

contenteditable adding multiple spaces at the end on key press

I have contenteditable div with following HTML in it
<div contenteditable="true" class="editor-note" id="FqzHgBZeHHT3QECD2">
<span id="mSFK7wMphfKgBaCQg">Well</span>
<span id="8jHKJyhFfqHw9WPpR">over</span>
<span id="EGmCtEKaiPJkMKGSE">one</span>
<span id="soDGqwvxvmzg9hF5W">,</span>
<span id="uTEWcPrqoq9tZGYnK">my</span>
<span id="8HQEjMNKLiv6XJkqp">guest</span>
<span id="bYzzWYq5P4jTHLQ4S">today</span>
<span id="uey8ghQ4yNN62aY8J">is</span>
</div>
When I want to enter extra text into it, when I enter any key it is adding lot of at the end of the div being made.
This gif shows what's happening: http://g.recordit.co/l8m6IQwmNb.gif
This is what happens when I entered one letter n
<div contenteditable="true" class="editor-note" id="FqzHgBZeHHT3QECD2">
<span id="mSFK7wMphfKgBaCQg">Well</span>
<span id="8jHKJyhFfqHw9WPpR">over</span>
<span id="EGmCtEKaiPJkMKGSE">one</span>
<span id="soDGqwvxvmzg9hF5W">,</span>
<span id="uTEWcPrqoq9tZGYnK">my</span>
<span id="8HQEjMNKLiv6XJkqp">guest</span>
<span id="bYzzWYq5P4jTHLQ4S">today</span>
<span id="uey8ghQ4yNN62aY8J">is</span>
n
</div>
Here as you can see there is a lot of here, how can I solve this issue? I tried this in safari, same issue so this is not related to a browser at all.
Also, there are no event listeners attached to this div.
Any help appreciated, thanks.
EDIT
I'm using meteor js framework and this is the html code i'm using to generate this html
<div class="seg-editor">
<div contenteditable="true" class="editor-note" id="{{segmentId}}">
{{#each items}}
<span id="{{_id}}">{{text}}</span>
{{/each}}
</div>
</div>
my items helper just returns values from db, there are no event listeners attached to this
If I change my meteor code to remove spaces in html like below in single line
<div contenteditable="true" class="editor-note" id="{{segmentId}}">{{#each items}}{{showSpace #index}}<span id="{{_id}}">{{text}}</span>{{/each}}</div>
instead of spreading in multiple line
<div class="seg-editor">
<div contenteditable="true" class="editor-note" id="{{segmentId}}">
{{#each items}}
<span id="{{_id}}">{{text}}</span>
{{/each}}
</div>
</div>
that extra space issue was gone. Hope this helps someone
Possibly there will some script or CSS in your code which is the cause for this, So please check the cause or post a fiddle where this issue will reproduce.
Note: Checked your code on chrome and firefox, and it's working fine. You too can check this fiddle.

How to bind a Controller's method in each of the item in ng-repeat?

<div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="item in myCtrl.Data">
</div>
Look at the above code snippet. I want to bind a method like myCtrl.update() in each item in the ng-repeat. So that later in the directive's scope I can invoke the method like item.update().
You can use ng-bind for that purpose.
<div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="item in myCtrl.Data">
<span ng-bind="yourMethod(item.Data)"></span>
</div>
Hope this will be helpful.
You can bind it as you do binding outside ng-repeat.
<div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="item in myCtrl.Data">
<button ng-click="myCtrl.update()"></button>
</div>

AngularJS - Live update button style

So I'm trying to make a a-tag designer in AngularJS, my only problem is that the class and style of the a-tag doesn't update.
The code I have so far is this: DEMO
Is it because in this block of code;
<!-- Button example -->
<div class="item">
<h4>Example</h4>
<a style="{{botton.css.style}}" class="{{botton.css.class}}">
<i class="{{botton.css.icon}}"></i> {{ button.text }}
</a>
</div>
You have called it botton instead of button ?
Edit: Yes that is why.
you must use ng-style and ng-class instead style and class for binding
and dont use {{}} on value
ng-class="button.css.class"
and you have typo in binding syntax replace "botton" with "button"
<div class="item">
<h4>Example</h4>
<a ng-style="botton.css.style" ng-class="button.css.class">
<i ng-class="button.css.icon"></i> {{ button.text }}
</a>
it should works!

ng-if not found or not working outside ng-view

For sample: please check the link http://plnkr.co/edit/Q3Z669FeRHqMORcQ9v6K?p=preview.
I am working in Visual studio 2013.
I am trying to hide or based on authentication, I want to show the menu. But ng-if not working outside the ng-view.
Actually ng-if is not coming with the intellisense. Though I pasted the code, I didn't get. But ng-hide is working.
I am getting the ng-hide. But I don't like to use ng-hide, because this will just hide the element. So using inspect element, we can enable the menu.
Why I am not getting ng-if? Am I doing in the wrong way
<div id="page-wrapper" ng-controller="indexController">
<div id="page-header" class="bg-gradient-9" ng-if="!authentication.isAuth">
<div id="mobile-navigation">
<button id="nav-toggle" class="collapsed" data-toggle="collapse" data-target="#page-sidebar" aria-expanded="false" aria-controls="navbar"><span></span></button>
</div>
<!--Logo for all the screen-->
<div id="mobile-navigation">
</div>
<div id="header-logo" class="logo-bg mobile-hidden">
<a href="#/" class="logo-content-big" title="">
</a>
<a href="#/" class="logo-content-small" title="NoteReport">
NoteReport
</a>
</div>
</div>
<div id="page-content-wrapper ">
<!--Partial loading of the content-->
<div class="angular-ngview-content" ng-view>
</div>
</div>
</div>
This is the ancient old issue if child scopes created by ng-if, try:
ng-if="!$parent.authentication.isAuth"
EDIT
The ng-if directive was provided after angular 1.1.5, you are using 1.0.5. Working plunk.
This is because of ng-if creating a child scope and how prototypical inheritance works with primitives.just check once like
ng-if="authentication.isAuth"
change angularjs version to 1.3.8...It will work

Angular JS - ng-repeat and loop conditions

Hey i have this piece of code:
<div ng-repeat="i in values">
{{i}}
</div>
It works but i would like to put extra conditions inside the loop something like:
<div ng-repeat="i in values">
{{i}}
if(i !== 0){
<div></div>
}
</div>
How can i achieve this?
Use ng-if (or ng-show):
<div ng-repeat="i in values">
<div ng-if="i !== 0"></div>
</div>
Attached to the element, this will decide whether to display it or not.
Documentation for ng-if can be found here.
However, if you want to only do something if you are looping the first or last item, you can use $first and $last properties of ng-repeat as well. These are documented with ng-repeat. And can be used like this:
<div ng-repeat="i in values">
<div ng-if="$first"></div>
</div>
Use the ng-if statement
<div ng-repeat="i in values">
{{i}}
<div ng-if="i !== 0"></div>
</div>

Categories

Resources