Following the advice of #Pavlo to use https://github.com/angular-ui/ui-sortable,
I have this repeating list that I want to make sortable.
<div ui-sortable ng-model="regions" class="list-group region-list">
<a data-ng-repeat="region in regions" data-ng-href="#!/regions/{{region._id}}" class="list-group-item">
<h4 class="list-group-item-heading" data-ng-bind="region.name"></h4>
</a>
</div>
Following the advice of #nrodic and added 'ui.sortable' to config.js.
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.sortable'];
However, when I add that I get the following message:
"ui.sortable: jQuery should be included before AngularJS!"
Any further help is appreciated.
Thank you.
The answer depends on your application's modules. To register dependency in main module you can edit public/config.js and add 'ui.sortable' to existing list:
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate',
'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.sortable'];
If you are registering your own module and want to enable ui.sortable there, then look for file public/modules/<my-module>/*module.js and add dependency there:
ApplicationConfiguration.registerModule('<my-module>', ['ui.sortable']);
Hope this helps.
I had the exact same problem. Try these steps:
bower install jquery --save
add 'public/lib/jquery/dist/jquery.min.js',
'public/lib/jquery-ui/jquery-ui.min.js,
in front of angular.js in config\env\all.js
add 'ui.sortable' in applicationModuleVendorDependencies located in public/config.js
Following these steps should fix the problem.
Related
I'm using code like {{user.city}} in one of my templates to pull data from my MySQL DB on my Ionic Hybrid App.
On my frontend, For a value like
Bogotá
I get
Bogotá
I made sure to set my DB collation to utf8_unicode_ci.
I tried searching and it seems I need to decode the entities, but I haven't been able to do so.I tried using:
<div ng-bind-html={{user.city}}></div>
Please bare in mind I have several values like this, not only one.
I'm also using an Ionic App I got from a code market, and I'm not very ionic-savvy, so if you could provide detail I would be very grateful!
Thanks!
David
You must encode the locations in php.
Then in your controller:
$http.get("path").success(function(response) {
var res =response.results;
var locationtext =[];
for (key in res){
//in this case your locationsTEXT is the locations from the API
locationtext.push(JSON.parse(res[key].locationsTEXT));
}
$scope.city = locationtext;
}
In view:
<ion-list>
<ion-item ng-repeat="point in city track by $index">
<p>{{point}}</p>
</ion-item>
</ion-list>
Keep in mind that, above code is a general solution. You must adapt this code according to your variables and needs.
Hope this helps!
I´m doing the jhipster example (book and author) and I want to use textangular for description fields.
I used this guideline (https://github.com/fraywing/textAngular) to do the changes but it does not work.
The question is, if anyone knows a guide to using textangular with jhipster as an example: What files I should modify, how, etc.
I am new at this tried to follow the guide but something is not working.
I am doing the JHipster example :http://jhipster.github.io/creating_an_entity.html
I executed Via Bower: bower install textAngular
I modified test\src\main\webapp\scripts\app\entities\book\book-detail.html
adding <div text-angular ng-model="htmlVariable"></div>
I added the
script src='/bower_components/textAngular/dist/ explained in the guideline.
Currently I tried to do the step 4 explained in the textangular guideline
a. Add a dependency to textAngular in your app module, for example: angular.module('myModule', ['textAngular']).
b. I tried some option but it does not work.
c. The current controller file is the following:
'use strict';
angular.module('testApp')
.controller('BookDetailController', function ($scope, $stateParams, Book, Author) {
$scope.book = {};
$scope.load = function (id) {
Book.get({id: id}, function(result) {
$scope.book = result;
});
};
$scope.load($stateParams.id);
});
Could you help me to understand how can I add this line angular.module('myModule', ['textAngular']) without breaking the page, please.
At least you should add to your bower.json and run bower update afterwards (this should download all required files into your bower_components directory).
Now you add all required files (js, css) to your index.html as described in textangular howto. Or do you have a more specific problem?
EDIT:
Go to your app.js file (src/main/webapp/app.js). There you find the module defintion: angular.module('jhipster', ['LocalStorageModule'...]. If you named your application different 'jhipster' will be your application name. Just add 'textangular' at the end of the list of injected modules: e.g:
angular.module('jhipster', ['LocalStorageModule','tmh.dynamicLocale','pascalprecht.translate',
'ngResource', 'ui.router', 'ngCookies', 'ngCacheBuster', 'infinite-scroll', 'textTangular'])
I'm working with polymer and I'm testing all in my local environment and all is working as expected, but the problem is when I'll move it into production, where the url shouldn't be the same as in my local. In node.js I can set it via the config.json file and catch it with app.get('config') or something like that, but in polymer I cant get it, and the only chance I have is to create another endpoint with all the config.json config file, but, and here is the best part, I should hardcode this url in polymer!! (so annoying). There is some way or library or component or something that I'm missing ?
Thanks in advance guys! StackOverflow and the users helped my a lot!
UPDATE
The thing is that I'm using custom elements (because I had handlebars too and there is a little problem with the {{}}) so, in the custom elements that I created I have this (for example in the core-ajax call):
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="/app/middle/login" ....></core-ajax>
as you can see the url is a little bit hardcoded, I want to use something like this (this is what I have on the node.js endpoint application):
router.post(endpoint.login, function (req, res) {
and I want to got something like that over polymer
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="{{login}}" ... ></core-ajax>
<script>
Polymer('log-form', {
login: endpoint.login,
ready: function () {
....
})
});
</script>
I'ts more clear now? I'm not so strong on english language.
Thanks Guys, for all!
I am a jQuery user and just learning YUI. I have the following code and I keep the error that YUI is not defined. I know it is an issue with linking to the library but I'm not exactly sure what. I had someone else test my code where they had YUI held locally and it worked fine. If I need to do this, how do I obtain a copy of the min.js file? When you download a copy from the YUI site its a tonne of files...
<head>
<title>YUI3 Test</title
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
</head>
<body>
<div id="menu">
<p>Click here to test.</p>
</div>
<script>
YUI().use('node', 'event', function (Y){
var changeText = function(e){
e.target.setHTML("<p>Now you see the test working.</p>");
}
var node = Y.one("#menu");
node.on("click", changeText);
//node.on("click", function(e){
// Y.one(node).load('menu.html');
//});
});
</script>
</body>
Thanks!
You're missing a > after </title. This may be causing the script tag not to be recognized and so it's not loading.
Here it is broken: http://jsbin.com/ubaxoy/1/edit
And here it works after adding the missing >: http://jsbin.com/ubaxoy/2/edit
I also had to change setHTML to setContent because YUI 3.2 didn't have setHTML yet. I'd also recommend you to use a newer version of YUI, from 3.9.1 up. There have been a number of great additions since 3.2.
I have been evaluating couchdb for a project and am using couchapp to develop the prototype. So far all I can only say it that it is an awesome tool. I have however run across a problem (which is surely caused by ignorance of the tool) that I cannot seem to get mustache partials to work and the reason for that I believe is that evently can't find the definitions of the partials I am using.
example out of a message queue evently template (evently/queues/_change/mustache.html)
<div class="queue">{{>queue_info}}</div>
...
and I have a queue_info.html with something like
<h2>{{name}}</h2>
where do I place the "queue_info.html" so that evently would find it and insert it properly? If I put it in the same directory as mustache.html it doesn't work.
Best regards,
Vukasin
ok i have figured this out so I am writing to help anyone who might run into the same issue in the future:
if you have data:
{ "queue_info": { "name": "queuename", "owner": "user1" }, "messages": [...] }
and you want to render the "queue_info" part using a partial you will need to create the partial called "queue_info" (it is important that the partial is called the same as the field) and place it in a file "queue_info.html" located in the subdirectory "partials" of the evently directory you are working in).
so we have evently/queues/_change/mustache.html
<div class="queue">
{{>queue_info}}
{{#messages}}
<div class="message">
author: {{author}}
message: {{text}}
</div>
{{/messages}}
</div>
and evently/queues/_change/partials/queue_info.html
Queue: {{name}}
Owner: {{owner}}
when we push this couchapp to the server we get a result which cascades as expected.
Hope this helps someone :-)