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
Related
I am new to Angular and may be missing something obvious. I did read the ng-model scope documentation. And followed the recommendation to use an object instead of primitives.
I also tried the $parent suggested by a few others here. That didn't help either.
I have read many Q&As here involving ng-repeat. But they are talking about an input inside an ng-repeat. In my case there is only one text box. I am trying to search inside a tree using ng-repeat.
<script type="text/ng-template" id="tree_item_renderer.html">
{{data.name}}
<ul>
<li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'" ng-show="visible(data)"></li>
</ul>
</script>
This is the function being called:
$scope.visible = function(item) {
console.log("SearchText inside visible: " + $scope.input.searchText);
return !($scope.input.searchText && $scope.input.searchText.length > 0
&& item.title.indexOf($scope.input.searchText) == -1);
};
Take a look at my jsFiddle
I saw your code on the jsFiddle. There is an issue that you called ng-controller="TreeController" twice and initialized ng-app = Application. I have commented out these two lines of code, and you can see the change on the console.
The reason why you are getting this problem is you make Angular to re-initialize TreeController which it clears the value of input.searchText.
Check out the working jsFiddle !
<div ng-app="myApp">
<div ng-controller="TreeController">
Search UIC:
<input type="text" ng-change="search()" ng-model="input.searchText"
placeholder="Enter your search terms" />
<!-- <ul ng-app="Application" ng-controller="TreeController"> -->
<ul>
<li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'" ng-show="visible(data)">
</li>
</ul>
</div>
</div>
Okay this seems fairly odd but i am allowing my users to create any number of category / subcategories they want
When i pull the category data out it might look something like this:
as you can see from the above example the sub categories can have subcategories this list tree could go on forever.
Now trying to make the menu i have a simple list:
<ul class="nav dker">
<li ui-sref-active="active">
<a ui-sref="app.ui.jvectormap" href="#/app/ui/jvectormap">
<span translate="aside.nav.components.ui_kits.VECTOR_MAP" class="ng-scope">Vector Map</span>
</a>
</li>
</ul>
The issue here is that i don't know how many times i have to repeat the subcategories which makes it impossible for me to know when to check for it?
i hope you know where im going with this how can i make a reliable list that follows the array pattern above when i don't know how many levels there are?
You are going to want to create a recursive template which will essentially look something like this:
<div data-ng-include="'displaySubcategory.html'"></div>
where displaySubcategory.html contains the ng-repeat and a recursive call to itself.
<div data-ng-repeat="category in category.subcategories">
<h1>{{category.name}}</h1>
<div data-ng-include="'displaySubcategory.html'"></div>
</div>
The idea is that everytime you call ng-repeat you are creating a scope around the child element, so a call to {{category}} will display the lowest level (current child) of the tree/data structure.
I am trying to filter a JSON list based on one of the contained values. For example, I have JSON objects where they all have name, type, description etc and I am attempting to filter based on the parameter stored in $stateParams (which happens to be type). It works if I hard code the type (e.g. "item in items| filter:{Type:'Grain'}").
Also, I know the value from $stateParams is working as I have it set to the page title. Is there a problem with my below syntax?
<div class="list card">
<div ng-repeat="item in items| filter:{Type:'{{type}}'}">
<a class="item item-icon-left" ng-click="onSelectItemList(item)">
<i class="icon ion-home"></i>
{{item.Name}}
</a>
<div>
Thanks in advance.
Yes, the problem is the filter expects an expression, You should not interpolate ({{) the expression to value.
change
filter:{Type:'{{type}}'}
to
filter:{Type:type}
type is expression evaluated against scope and {{type}} --> Value of expression evaluated against the scope.
Use:
<div ng-repeat="item in items| filter:{Type:type}">
You can't do nested interpolation. Filter is expecting an expression, therefore type is evaluated as is.
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.
In the following code, users in an array of user objects, which have a name property in them:
$.template("listTemplate", "<ul><li>${name}</li></ul>");
$.tmpl("listTemplate", users).appendTo("#app");
My purpose is to generate a html similar to:
<div id="app">
<ul>
<li>Barney</li>
<li>Cartman</li>
<li>Sheldon</li>
</ul>
</div>
However, I'm stuck with:
<div id="app">
<ul><li>Barney</li></ul>
<ul><li>Cartman</li></ul>
<ul><li>Sheldon</li></ul>
</div>
Is there an elegant way to accomplish this directly with a jquery template, and somehow indicate to the templating engine that <ul> need not be repeated?