Develop Reference

AngularJS display first element in array

Using Laravel for my API and the error response is like this:
I set that as a scope called errors and do a ng repeat to show them:
<ul ng-show="errors" class="list errors-list">
<li class="item" ng-repeat="error in errors">{{error}}</li>
</div>
However, this results in:
["The title field is required."]
Is there a 'best' way to just get the text and not the speech marks or brackets?
I know I can just search and replace them but always like to know if there is a best way to do something.

Just pull the first element
<ul ng-show="errors" class="list errors-list">
<li class="item" ng-repeat="error in errors">{{error[0]}}</li>
</div>
Quoting the documentation of AngularJS expressions, these are examples of valid expressions in Angular:
1+2
a+b
user.name
items[index] <--- This is what we're using for this answer

How to bind desIndex to sort values in angular-ui-tree?

I'm using angular-ui-tree.
The object I have in my treeview has a sort index. I am looking for a way to bind this sort index to the desIndex of the treeview scope, using something similar to this:
ui-tree-desIndex="node.sortIndex"
desIndex is the treeview node's index and node.sortIndex is my object's index.
I want it to sort my list by my objects' values, and when I move an object in the treeview the scope will update that object's index like this:
<div ui-tree="treeOptions" callbacks="treeOptions">
<ol ui-tree-nodes="" data-nodrop-enabled="true" ng-model="rootNodeLst" callbacks="treeOptions" id="tree-root">
<li ng-repeat="node ui-tree-desIndex="node.sortIndex" in rootNodeLst" callbacks="treeOptions" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
The code above isn't working, how can I fix it?

Change this
<li ng-repeat="node ui-tree-desIndex="node.sortIndex" in rootNodeLst" callbacks="treeOptions" ui-tree-node ng-include="'nodes_renderer.html'"></li>
To this
<li ng-repeat="node in rootNodeLst" ui-tree-desIndex="node.sortIndex" callbacks="treeOptions" ui-tree-node ng-include="'nodes_renderer.html'"></li>
For starters, to get your ng-repeat working.
Then, if ui-tree-desIndex does not get the value set, you can try:
ui-tree-desIndex="{{node.sortIndex}}" or ng-attr-ui-tree-desIndex="{{node.sortIndex}}"
See this JSFiddle.

Funny thing.
Found out that the way im building the treeview with the nested html modify my $index to show this sort number, so, anyway. thanks for your time and helå

Angular ng-repeat $index

I'm creating a list of items the user can click to go to the next picture.
<ol class="indicators">
<li ng-repeat="img in pics" ng-click="slideTo($index)"></li>
</ol>
this code works but the problem is that it doesnt fill in the $index in the ngClick directive. This is the resulting html:
<li ng-repeat="img in pics" ng-click="slideTo($index)" class="ng-scope"></li>
if I put the $index in between {{ }}, it does work, but I get an error in the console.
Resulting html:
<li ng-repeat="img in pics" ng-click="slideTo(0)" class="ng-scope"></li>
Error:
Error: [$parse:syntax] http://errors.angularjs.org/1.3.15/$parse/syntax?p0=%7B&p1=invalid%20key&p2=10&p3=slideTo(%7B%7BNaNndex%7D%7D)&p4=%7B%index%7D%7D
I've seen examples of this where they dont use the curly brackets but then the $index was used in a child element and not the element itself.
Could someone tell me what I'm doing wrong and when you should use {{ }} when using Angular Expressions.

Inspector will not show it filled in, however, if you try logging the parameter passed to the function you will see that it is indeed the corresponding index number to the item you clicked on.

Call an angular function inside html

I was trying to see if there is a way to call a function I designed inside the scope:
<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
<li class = "ui-divider">
{{meter.DESCRIPTION}}
{{htmlgeneration}}
</li>
</ul>
$scope.htmlgeneration = function()
{
...
}
The function is called htmlgeneration. Essentially, what I want to do is dynamically append HTML inside the li element while using AngularJS.

Yep, just add parenthesis (calling the function). Make sure the function is in scope and actually returns something.
<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
<li class = "ui-divider">
{{ meter.DESCRIPTION }}
{{ htmlgeneration() }}
</li>
</ul>

I guess my problem was related to conflicts with Django tags. This post was helpful.
What worked for me was a simple solution involving using ng-bind and changing the code to something like this:
<ul class="ui-listview ui-radiobutton" ng-repeat="meter in meters">
<li class="ui-divider" ng-bind="htmlgeneration(meter.DESCRIPTION)">
</li>
</ul>

Angularjs - tinyMCE 4 directive not working after using sortable

I'm building a project with AngularJS using AngularUI directives: ui.tinymce and ui.sortable.
Here is my code:
<ul ui-sortable="sortableOptions" ng-model="appData.data">
<li ng-repeat="box in appData.data" boxlistitem>
<textarea ng-model="box.title" value="{{box.title}}" class="tinyMCE" ui-tinymce="tinymceOptions"></textarea>
</li>
</ul>
Basically it works great, but a strange thing happens once I'm sorting one of the list items - the tinyMCE not working any more (see the attached images - the left one is how it suppose to be).
Any idea what might be the problem?
Thanks,
Daniel

Daniel,
It's a known issue, I have managed to work it out with ng-include, so that the tinymce textarea will be in it.
like this:
<ul ui-sortable="sortableOptions" ng-model="appData.data">
<li ng-repeat="box in appData.data" boxlistitem ng-include src="box.template_name">
</li>
</ul>
<script type="text/ng-template" id="tinymce_module">
<textarea ng-model="box.title" value="{{box.title}}" class="tinyMCE" ui-tinymce="tinymceOptions"></textarea>
</script>
and in the controller you need to do something like this:
$scope.sortableOptions =
update: (e, ui) ->
box.template_name = ""
$timeout ->
box.template_name = "tinymce_module"
,0
just find your way to pass the {{box}} to the update function in sortableOptions, that will reload the tinymce plugin with all of it's data.
Good luck.