<div ng-init="offers = [
{state:'Zabiorę', from:'Warszawa', to:'Wrocław', date:'30/04/16', size:'S:8 M:4 L:2 XL:0'},
{state:'Wyśle', from:'Wrocław', to:'Warszawa', date:'31/04/16', size:'S:0 M:1 L:0 XL:0'}]">
<div ng-repeat="offer in offers">
<hr class="featurette-divider">
<div class="announcement row">
<div class="col-md-1"><strong>{{offer.state}}</strong></div>
<div class="col-md-2">
<img class="img-circle"
src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
alt="Generic placeholder image" width="70" height="70">
</div>
<div class="col-md-1">{{offer.from}}</div>
<div class="col-md-1"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
<div class="col-md-1">{{offer.to}}</div>
<div class="col-md-2">{{offer.date}}</div>
<div class="col-md-2">{{offer.size}}</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary">Szczegóły</button>
</div>
</div>
</div>
</div> // </div ng-cloak>
Hello, i just wrote some code in my jhipster project, i wrote that in one of my project template and it just doesnt work, it shows nothing. When on jsfiddle.net it works.
#edit
Entire code, controller and state:
- http://pastebin.com/2tkvbiwG - template.html
- http://pastebin.com/kV4E7x0G - state.js
- http://pastebin.com/XF5rBmK7 - controller.js
Your code should work just fine. Please check that you have included angular.js and that you have defined your ng-app and ng-controller
Here is a plunker:
https://plnkr.co/edit/JLIQJQoEM9q4iAztY7KQ?p=preview
EDIT
In controller.js you need to define ui-router like this.
angular
.module('deliveritApp', ['ui.router'])
.controller('SearchOfferController', SearchOfferController);
Also name your function SearchController to function SearchOfferController.
In state.js you need to add the $stateProvider in the config like this:
angular
.module('deliveritApp')
.config(['$stateProvider', stateConfig])
Related
I am new to AngularJS. I'm trying to toggle a modal into view using ng-if and ng-click.
Essentially, in my controller, I have a scoped variable called "aboutOn". When it is true, the modal is displayed. When it's false, it's not. Simple.
The ng-if part works. But the ng-click part is causing trouble. Sometimes, it just doesn't work.
To open the modal I have this:
<div id="about-link-container" ng-click="aboutOn=true">
<p><i class="far fa-info-circle"></i> About</p>
</div>
This does not work how I want it to work. If I click on the actual text, nothing happens. It only triggers when I click around the border, not directly on the link. If I put the ng-click on the p tag, it doesn't work at all.
Then inside the modal, I have this to close it:
<div class="about-close">
<i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>
This doesn't work at all. What's going on here? Here is my controller, if that's possibly related:
angular.module('myApp', [])
.controller('myController', ['$scope', function myController($scope) {
$scope.female_name = "female name";
$scope.position = "position";
$scope.tedious_task = "tedious task";
$scope.dirty_task = "dirty task";
$scope.female_name = "female name";
$scope.celebrity = "celebrity";
$scope.useless_skill = "useless skill";
$scope.aboutOn = false;
}]);
Here is the entire view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower|Oswald" rel="stylesheet">
<script data-require="angular.js#1.3.10" data-semver="1.3.10" src="https://code.angularjs.org/1.3.10/angular.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body ng-app="myApp">
<div ng-controller='myController'>
<div class="form">
<div id="about-link-container" ng-click="aboutOn=true">
<p><i class="far fa-info-circle"></i> About</p>
</div>
<h1>M<img src="angular-logo.png" class="logo" />DLIBS</h1>
<div class="form-inner">
<h2>Provide the following words:</h2>
<input ng-model="female_name" />
<input ng-model="position" />
<input ng-model="tedious_task" />
<input ng-model="dirty_task" />
<input ng-model="celebrity" />
<input ng-model="female_name" />
<input ng-model="useless_skill" />
</div>
</div>
<div class="display">
<p>{{ female_name }} was a {{ position }}. Although she loved parts of her job,
she absolutely hated {{tedious_task}} and {{dirty_task}}. So, {{female_name}} met
with her life mentor {{celebrity}} who told her to learn how
to {{useless_skill}} at school. Her school didn't offer a
course on {{useless_skill}} so she studied programming instead.
</p>
</div>
<div ng-if="aboutOn" class="about">
<div class="about-main">
<div class="about-close">
<i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>
<h2 class="about-title"><i class="fas fa-info-circle"></i> About</h2>
<p class="about-p">Madlibs is an AngularJS application. When user fill in the words in
the form above, those words will automatically populate the paragraph below.
Try different combinations!
<br />
<br />
This application was made in 2018 by Jack Seabolt. It was constructed using AngularJS.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
There are two problems that give you this issue.
ng-if creates its own scope.
So if you want to reach controller's scope, you need to have ng-click="$parent.aboutOn=false"
FA icons replace DOM (?). You cannot have ng-click on an icon.
Wrap your icon with <div> (as you already do) and put ng-click on it
The code that you need to change, from this:
<div class="about-close">
<i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>
to this:
<div class="about-close" ng-click="$parent.aboutOn=false">
<i class="fas fa-times about-close-icon"></i>
</div>
I'm using tabs in an html page and I'm trying to declare one controller for each tab.
<div class="tab-content">
<div class="tab-pane active" id="customerInfo">
#customerList()
</div>
<div class="tab-pane" id="communities">
#communityList()
</div>
For the first tab I declare my controller in "customerList" like this :
<div class="block full" ng-controller="customerCtrl">
and I tried the same thing with the second tab but it didn't work. Any help please.
This is possible and judging from here you can do this as simple as:
<body ng-app="">
<div class="tab-content">
<div class="tab-pane active" id="customerInfo" ng-controller="customerListcontroller">
#customerList()
</div>
<div class="tab-pane" id="communities" ng-controller="communityListcontroller">
#communityList()
</div>
</div>
</body>
There are few things you might be doing wrong:
forget to put ng-app="app" to wrap your controllers
From the question there is a div omission. Make sure this is not the case in the code
Not defining your controllers properly.
Not calling the file containing the controller in the HTML file
It should be a minor fix. You can also take a look at this.
I've seen this question and seen it answered but not in any way I can use or understand. The question is very specific and simple but somehow the answers are a bit over my head.
All I want to do is have a very simple menu work. when i menu item is clicked, I need it to of course use my angular controller function to handle it. I want all of that on the angular side. It actually does work when I simply use the elements directly without declaratively making my own.
So this works just fine and my ng-click is successfuly calling my acceptedSelect() in my controller:
<core-menu>
<div ng-repeat="order in acceptedOrders" ng-click="acceptedSelect(order)">
<paper-item class="my-paper-item" >
<div class="order-list-item">
<div class="order-number">{{order.Order}}</div>
<div class="order-date"> {{order.Date}} </div>
<div style="clear: both"></div>
<div class="order-address">
{{order.Property}}
</div>
</div>
</paper-item>
</div>
</core-menu>
But i do the same thing by wrapping the paper element in a polymer-element, it doesn't work. So this will not work:
<polymer-element name="my-app" attributes="refresh">
<template>
<style>
...
</style>
<core-menu>
<div ng-repeat="order in acceptedOrders" ng-click="acceptedSelect(order)">
<paper-item class="my-paper-item" >
<div class="order-list-item">
<div class="order-number">{{order.Order}}</div>
<div class="order-date"> {{order.Date}} </div>
<div style="clear: both"></div>
<div class="order-address">
{{order.Property}}
</div>
</div>
</paper-item>
</div>
</core-menu>
</template>
<script>
Polymer('my-app', {
});
<my-app></my-app>
I'm just not sure what I can do to make this work. Any help is greatly appreciated.
I have a basic widget block:
<div class="matter ng-controller="ProductsCtrl">
<div class="container-fluid">
<div class="widget">
<div class="widget-head">
<div class="pull-left">Browse live products</div>
<div class="widget-icons pull-right">
<a class="wminimize" href="#" ng-click="showContent = !showContent"><i class="icon-chevron-up"></i></a>
</div>
<div class="clearfix"></div>
</div><!--widget-head-->
<div class="widget-content" ng-class="{ 'hidden': !showContent }">
<div class="padd">
<div>
{{content}}
</div>
</div>
<div class="widget-foot"></div>
</div><!--widget-content-->
</div><!--widget-->
</div>
</div>
And here is the empty controller:
appAdmin.controller("ProductsCtrl", function($scope){
});
I'm using ng-click to hide/show the content, but I am trying to default the content to be visible, and also try to swap the image for the icon chevron down whenever it's hidden. I am very new to Angular and am looking for some direction in adding models and things to make these simple features work.
Any help would be appreciated.
EDIT: Made default visible by switching ng-class="{ 'hidden' : !showContent }" to ng-class="{ 'hidden' : showContent }"
For the content to be visible by default, I would set $scope.showContent to true in the controller. You can use ng-class to change the chevron icon class based on the value of showContent in the following way: <i ng-class="{'icon-chevron-up': showContent, 'icon-chevron-down': !showContent}"></i>. Only the keys of the truthy values will be applied, so it will be either icon-chevron-up or icon-chevron-down. Let me know if I misunderstood your question!
My index.html page is like as follows:
<div id="sidepanel" data-ng-controller="ListCtrl">
<li data-ng-repeat="record in records">
{{record.id}}
<input type="checkbox" data-ng-model="addwidget">
</li>
</div>
<div id="main">
<div data-ng-view></div>
</div>
for this data-ng-view i have another page recordlist.html in that i have following code:
<div data-ng-controller="ListCtrl">
<ul class="design">
<li data-ng-repeat="record in records">
<div data-ng-switch data-on="record.category">
<div data-ng-switch-when="reporting1">
<div id="{{record.id}}" data-ng-show="addwidget">{{record.description}}</div>
</div>
<div data-ng-switch-when="reporting2">
<div id="{{record.id}}" data-ng-hide="addwidget">{{record.description}}</div>
</div>
</li>
</ul>
</div>
My question is i want to show the first div when i check the checkbox & when i uncheck it i want to show the second div.When both of the data-ng-model & data-ng-hide/show are on the same page then it works fine but in my case it present on two different pages.
Is it correct ? How can i implement this. Need Help.Thanks.
The problem is that you are setting addwidget in the first controller, but is trying to use it in the second. Controllers are not singletons.
So, in this situation:
<div id="sidepanel" data-ng-controller="ListCtrl">
...
</div>
<div id="main">
<div data-ng-view>
<div data-ng-controller="ListCtrl">
</div>
</div>
</div>
You got two separated controllers and scopes. And you are setting addwidget in the first trying to read in the second.
You can either bind it to the root scope $root.addwidget or use a service share to the states.
As you have many records, binding directly to root is a problem, as all of them are going to share the same state. So you gonna need an object in the rootScope and bind the option by id $root.addwidget[record.id]. Made a pretty simplified modification here.