For a list of items I want to show details after item click. Details will be loaded with ajax request.
I have something similar to this: http://jsfiddle.net/asmKj/
How to modify this to work with details loaded dynamically?
For sure I have to prepare function in my controller like this:
$scope.getDetails = function (name) {
return $scope.details = myService.getDetails(name).then(function (details) {
return $scope.details = details;
});
}
But how to bind this data to details div?
I would rather change with something like this:
HTML
<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.definition}}</h4>
<div class="procedure-details" ng-show="procedures.isVisible">
<p>Number of patient discharges: {{procedure.discharged}}</p>
</div>
</li>
</ul>
JS
$scope.procedures = [
{
definition: 'Procedure 1',
discharged: 23
},
{
definition: 'Procedure 2',
discharged: 2
},
{
definition: 'Procedure 3',
discharged: 356
}
];
$scope.getDetails = function ($index) {
$http.get('your-url').success(
// use the data retrieved
procedures[$index].isVisible = !procedures[$index].isVisible;
);
}
There are basically two options.
Put everything in your procedure objects as separate properties (when the details are loaded) -- then you can just use procedure.showDetails in ng-repeat.
Use $index to get index from your procedures -- then you can use it to access any arbitrary collection from your scope in ng-repeat.
(may update my answer, when you provide more info about structure of your data; and if still needed)
Related
i'm new to nightwatch and was wondering if there's any good way to select the inner element of a current element and then get the text? Assuming i have the following..and i'm trying to retrieve the text inside (a) tags of each (li).
so i would like to get 'text to retrieve' and 'text to retrieve 2'.
...
<div class="mywrapperhere">
<ul>
<li>
<a>.....
<div>text to retrieve</div>
</a>
</li>
<li>
<a>.....
<div>text to retrieve 2</div>
</a>
</li>
<li>...
...
</div>
I'm thinking along these lines..
module.exports = {
'Demo test 1' : function (browser) {
....
//some sort of selector then gets from the anchor list
...'.mywrapperhere li a') : {
..
//for each element of the anchor..
{
//is there anyway to get it through something like
element.('div').innerHTML eg..
//or am i forced to use browser.execute( ...getElementsByTag method
//to achieve this?
}
}
browser.end();
}
};
Looking at the nightwatch api, i couldn't find anything allows me to do that. I'm particularly looking at the 'Element State' examples that doesn't seem to have a way for me to select the current element state's child element :
http://nightwatchjs.org/api/elementIdAttribute.html
The reason why i had to loop through the anchor tag level is because i'll need to retrieve a few more data besides the one from div tag, thanks!
You can use elementIdElement and elementIdText to get text from a child element. First you can get all the li elements by using .elements(). Then you use elementIdElement to get a child element. Then you can use elementIdText to get the text of this child element. Here is an example that will allow you to get the text of both list items in your snippet and log the values to the console.
browser.elements('css selector', 'li', function(listItems) {
listItems.value.forEach(function(listItem) {
browser.elementIdElement(listItem.ELEMENT, 'css selector', 'a', function(anchor) {
browser.elementIdText(anchor.ELEMENT, function(text) {
console.log(text.value);
});
});
}, browser); //have to pass in browser for scoping
});
I have a blog and a quotationfamous sayings repository on one site.
The quotations are tagged and the entries are tagged too.
I use this rtconner/laravel-tagging package.
Now, what I want to do is to display ALL Quotation models which share the same tags as article.
The Eloquent syntax is simple, as the original docs provide an example:
Article::withAnyTag(['Gardening','Cooking'])->get();
possible solution
Optional routing parameters. The asker-picked answer in this question gives a solution:
//in routes.php
Route::get('/{book?}/{chapter?}/{topic?}/{article?}', 'controller#func');
//in your controller
public function func($book = null, $chapter = null, $topic = null, $article = null) {
...
}
my problem
In my app the shared tags might count more than 3 or 5. I will soon get an example with even 10 tags. Possibly more
My question
Does it mean that I have to construct an URL with 10 optional routing parameters? Do I really need sth like this:
Route::get('quotations/tags/{tag1?}/{tag2?}/{tag3?}/{tag4?}/{tag5?}/{tag6?}/{tag7?}', 'controller#func');
my question rephrased
I could create a form with only a button visible, and in a hidden select field I could put all the tags. The route would be a POST type then and it would work. But this solution is not URL-based.
I think you could process the slashes, as data:
Route::get('quotations/tags/{tagsData?}', 'controller#func')
->where('tagsData', '(.*)');
Controller:
public function controller($tagsData = null)
{
if($tagsData)
{
//process
}
}
Ok, this is my solution. As I have a tagged model, I dont't need to iterate through tags in url to get the whole list of tags.
The enough is this:
// Routes file:
Route::get('quotations/all-tags-in/{itemtype}/{modelid}', 'QuotationsController#all_tagged_in_model');
Then in my controller:
public function all_tagged_in_topic($itemtype, $id) {
if($itemtype == 'topic') {
$tags = Topic::find($id)->tags->pluck('name')->all();
$topic = Topic::find($id);
}
if($itemtype == 'quotation') {
$tags = Quotation::find($id)->tags->pluck('name')->all();
$quotation = Quotation::find($id);
}
// dd($tags);
$object = Quotation::withAnyTag($tags)->paginate(100);;
And it is done.
Now, the last issue is to show tags in the URL.
TO do that, the URL should have an extra OPTIONAL parameter tags:
// Routes file:
Route::get('quotations/all-tags-in/{itemtype}/{modelid}/{tags?}', 'QuotationsController#all_tagged_in_model');
And in the {url?} part you can just write anything which won't break the pattern accepted by route definition.
In your view you might generate an URL like this:
// A button to show quotes with the same set of tags as the article
// generated by iteration through `$o->tags`
<?php
$manual_slug = 'tag1-tag2-tag3-tag4`;
?>
<a href="{{ URL::to('quotations/all-tags-in/article/'.$o->id.'/'.$manual_slug) }}" class="btn btn-danger btn-sm" target="_blank">
<i class="fa fa-tags icon"></i> Tagi:
</a>
I have a form page where the user selects a filter and a table on the bottom of the page updates. Each line in the table has a hyperlink in column one that associates a line item to an item in the database. I am not using GORM.
I need to be able to send the current filters to the controller via AJAX (functioning). Then I need to render a partial template (to a div) that loads the data created by a query based on the client's request parameters.
GSP:
....
<button onClick="generate_table()" class="pure-button">Generate Table</button>
...
<div id="selection_table">This should load with data</div>
...
JS:
//Link for AJAX
var url = "${g.createLink(action:'generate_table', controller: "statusReports")}";
//The actual call
$.getJSON(url, {
period: JSON.stringify($("#period").val()),
...
...
}, function(data) {
$('#selection_table').empty();
}).done(function(data) {
//I need to load the template at this point?
})
Controller:
def generate_table(){
def table_data = statusReportsService.generate_titles(params)
// Table data is already a map
// What do I need to render here? The template is named _selectionTable.gsp and should use table_data to generate html.
}
Partial:
I still haven't written the code for this yet. For now it is just some random text to see if I can even load the template when I press the button
In your controller:
render(template: 'selectionTable', model: table_data)
In your GSP/HTML you need to use $.get and use the following:
$('#selection_table').html(data)
That should do the trick!
I'm trying to create a directive that would enhance an HTML element. So I managed to get the directive to run and to be associated with the element My current code is something like this:
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'C',
replace: false,
scope: {},
link: function(scope, element, attrs) {
}
}
});
Now I would like to add new methods to the HTML element, for example I would like to do this:
// Pseudo code
myElement.reset();
myElement.reload(); // etc.
What would be the best way to add these methods to the directive?
Adding new methods to elements is not the Angular way. The angular way would be creating object with fields, passing it to directive and watch for field changes inside directive. Here is simple example: http://plnkr.co/edit/5v5mN69Bu18jpnoGwYqj?p=preview
Your example of your directive is very basic, so I can't see what do you want to achieve.
At least I can say: You can define new functions as functions of the scope , e.g.
...
link: function(scope, element, attrs) {
scope.reset = function() {
// reset something
}
// ...
}
If you want to access data loaded (e.g. for use in function reload()) in the scope you should write a controller for this use. so you can inject a service as a data source.
Implementing functions bound to elements directly is more the jQuery way to do not the angularjs one. In angularjs you work with scopes mainly.
Maybe you provide a more complete example at best using jsfiddle or plnkr, I think it easier to help to see your use case or your problem as a piece of working code.
One way to add these methods to your directive is to make the directive a controller (aka a subview). The $scope param in the controller will give you bi-directional access to the HTML in the template:
For example:
.directive("myDirective", function() {
var controller = ['$scope', function teamCountCtrl ($scope)
{
$scope.reset = function() {
// modify $scope.obj
};
$scope.reload = function() {
// modify $scope.obj
};
}];
return {
replace: true,
templateUrl: 'js/directives/teamCount.html',
scope: {
obj: '='
},
controller: controller
}});
Then in the template HTML you can call reset() or reload():
<div>
<a tabindex=-1 class="btn" href="#" ng-click="reset()">
<i class="fa fa-fw"></i>
</a>
<a tabindex=-1 class="btn" href="#" ng-click="reload()">
<i class="fa fa-fw"></i>
</a>
I have this json object :
[
{
"company_name": "Spix Clothing Co."
},
{
"company_name": "spixel"
},
{
"company_name": "WebNiJose Co."
}
]
As you can see, its an object without a name, and has 3 objects within it.
I wonder if how am I suppose to handle this. I want each one to be in appended in <ul></ul>.
By the way, that is a response from an ajax call, like this:
success : function(output) {
console.log(output);
}
And the php file fire that like this:
echo json_encode($result);
How do you think is the best way to handle that?
The response that you're receiving is actually an array so you would handle this situation as follows:
Parse the string into an object that you can use in javascript:
var companyObject = JSON.parse(output);
Loop through the array and pull out the object attributes and create a new <li> element to contain for example the company name. JQuery provides an automatic index for us to use if you wish. (Assuming your markup already has an <ul> element with an id of "container".)
var $container = $('#container'); // where to append the <li>
$.each(companyObject,function(i,company){
var $newElement = $('<li/>'); // create a new <li> element
$newElement.html(company.company_name);
$container.append($newElement); // attach the new <li> element
});
Here is a full example: http://jsfiddle.net/mNzm9/2/