I want to show errors with alerts using bootstrap, how do I do with vuejs?
This is my code:
<div v-if="this.getError">
<div v-for="(_errors, key) in this.getError">
<p>{{key.replace('contract_data.','')}}</p>
<ul>
<li v-for="error in _errors">{{error}}</li>
</ul>
</div>
</div>
And This is Json :
https://i.stack.imgur.com/AkBmJ.png
Try to remove "this" keyword in your template. It causes some issues there, specially with v-for loops.
<div v-if="getError">
<div v-for="(_errors, key) in getError">
<p>{{key.replace('contract_data.','')}}</p>
<ul>
<li v-for="error in _errors">{{error}}</li>
</ul>
</div>
</div>
Related
Suppose that, i got this pseudocode:
itemset1[apple,orange]
itemset2[banana,potato]
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li>itemset1[]</li>
</ul>
</div>
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li>itemset2[]</li>
</ul>
</div>
Is there any way that letting me write only once the html code? like
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li>items</li>
</ul>
</div>
and reveals twice like the first example(one for itemset1 and one for itemset2) i can use evrything javascript or php but prefer javascript
There're two ways (or more?). Rendering with PHP or JavaScript.
With PHP at view
For example, using foreach ($itemset1 as $item) probably what you want.
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<?php foreach ( $itemset1 as $item ) { ?>
<li><?php echo $item ?></li>
<?php } ?>
</ul>
</div>
With JavaScript
In this case, I'm using AngularJS for rendering data. Assuming you have known what AngularJS is and have been prepared for that.
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li ng-repeat="item in itemset1">{{ item }}</li>
</ul>
</div>
Of course, If you like, jQuery is also a good choice for you. But hate the jQuery append expression. And it's inconvenient.
See that reference:
PHP: foreach - Manaual
AngularJS: API: ngRepeat
Sure but now i have to write
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li ng-repeat="item in itemset1">{{ item }}</li>
</ul>
</div>
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li ng-repeat="item in itemset2">{{ item }}</li>
</ul>
</div>
Any way that i can avoid writing twice all of this div,header,ul,li elements?
I have the following code in my HTML View:
<div ng-repeat='shop in shops'>
<ul ng-repeat='item in items'>
<li>
<!-- {{Show items of the particular shop in here}} -->
</li>
</ul>
</div>
The items is a JSON Object. Every item has a shop_id that has to be used to do the sorting.
According to the documentation, I understand that I cannot use the if control statement in an Angular Expression to achieve what I the sort. How else can I use the control statement.
I tried this, but it obviously failed because we cannot return a continue.
//var resources.items and resources.shops are JSON objects output from a database
//This file is app.js
$scope.itemName = function(itemIndex, shopIndex) {
for (var i = 0; i < resources.items.length; i++) {
if (resources.items[itemIndex].shop_id == resources.shops[shopIndex].id)
return resources.items[itemIndex].name;
};
return continue;
}
And, this in the view:
<div class="tab-content" ng-repeat='provider in providers'>
<ul ng-repeat='item in items'>
<li>{{itemName($index, $parent)}}</li>
</ul>
</div>
I'm a beginner in Angular. Please help out.
Use the ngIf directive:
<div ng-repeat='shop in shops'>
<ul ng-repeat='item in items'>
<li ng-if="item.shop_id === shop.id">
<!-- {{Show items of the particular shop in here}} -->
</li>
</ul>
</div>
So I'm trying to create a simple tab system in angularjs, but whenever I try to bind data on ng-click on the a or li tags of my template I get this error:
Syntax Error: Token '' {1} at column {2} of the expression [{3}] starting at [{4}].
I been searching for hours can't figure out what's causing the problem
here's my code:
<div id="tabs">
<ul>
<li ng-repeat="file in files" ng-click="tab = {{$index}}">
{{file.file_name}}.{{file.file_extension}}
</li>
</ul>
</div>
<!-- tab container -->
<div class="tab-content">
<div class="tab" ng-repeat="doc in files" ng-show="tab == {{$index}}">
{{doc.file_name}}.{{doc.file_extension}}
</div>
</div>
I have tried wrapping {{$index}} in single quotes, that fixes the problem but the tabs don't work when clicked.
You could move this out of the inline logic and into a function, for example $scope.setTabIndex, like so:
$scope.setTabIndex = function(index) {
$scope.tab = index;
}
And then in your markup:
<li ng-repeat="file in files" ng-click="setTabIndex($index)">
And for the ng-show, just remove the curly braces around $index:
<div class="tab" ng-repeat="doc in files" ng-show="tab == $index">
Here's as jsBin
<ul class="day">
<li ng-repeat="sessions in day">
<ul class="table-view">
<li class="table-view-cell" ng-repeat="(heading, session) in sessions">
<span class="group">{{heading}}</span>
<ul class="cell">
<li class="cell-content" ng-repeat="val in session" ng-click="session($event, val.id)">
<div class="time" style="background-color:#{{val.color}}">
<span>{{val.start | date:"h:mma"}}</span>
<span>to</span>
<span>{{val.end | date:"h:mma"}}</span>
</div>
<div class="session" ng-class-odd="'odd'" ng-class-even="'even'">
<span class="name">{{val.name}}</span>
<span class="room">Room: {{val.room}}</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I've a nested ng-repeats and within the last inner loop have a function call, the function is defined on $scope but I'm getting the following error.
TypeError: object is not a function
$scope.session = function($event, id) {
console.log(id);
};
not sure if it has to do with nesting of ng-repeats and their scopes.
It has nothing to do with nesting several ng-repeats, but I think it is mixing it up with sessionobject which returns from ng-repeat="(heading, session) in sessions" . Try to change the function name to something else and give it a try.
I have a list of items. An item can be a number of things, let's say the list is something like so :
[userObject , vehicleObject , userObject , animalObject , animalObject]
Now I want to render the list with ngRepeat directive that will use a template according to the type of the object (Polymorphic rendering). can this be done?
maybe something like (ng-use is an hypothetically directive):
<ul>
<li ng-repeat="item in items">
<img ng-use="item.type == 'user'" ng-src="item.src">
<a ng-use="item.type == 'vehicle'">{{item.link}}</a>
<span ng-use="item.type == 'animal'">{{item.name}}</span>
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-switch="item.type">
<img ng-switch-when="user" ng-src="item.src">
<a ng-switch-when="vehicle">{{item.link}}</a>
<span ng-switch-when="animal">{{item.name}}</span>
</li>
</ul>
API reference:
http://docs.angularjs.org/api/ng.directive:ngSwitch
Although this doesn't use ng-switch, it does get round the problem of not having a type field, which #DotNetHaggis pointed out.
<div ng-repeat="field in fields">
<div ng-if="field.user !== undefined">user info</div>
<div ng-if="field.vehicle !== undefined">vehicle info</div>
<div ng-if="field.animal !== undefined">animal info</div>
</div>