I placed ui-sref attribute in tr element.
<tr ui-sref="test" ng-repeat="d in data">
Everything runs well, but I would like the link to 'test' to be visible in the bottom of the browser when hover the row of the table. Is there a way to obtain it?
angular.module('myApp',[])
.controller('MyCtrl', function(){
this.model = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as myCtrl">
<span ng-mouseover="myCtrl.model.mouseIsOver = true"
ng-mouseout="myCtrl.model.mouseIsOver = false">
Hover me
</span>
<div ng-if="myCtrl.model.mouseIsOver">
test
</div>
</div>
Not really related to ui-router but you can do this with built in directives in the ng main module.
Related
I'm using angular js to produce to add an array and display it as we go along. So far the given code adds an array to the list but it doesn't keep adding the array with the press of the function.
I'm quite new to angular and i think there's something I'm missing but right now I'm stuck.
The html code has a button linked which is supposed to carry out the function.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = ["Testing Task 5.1", "Downloaded Task 5.1"];
$scope.addArray = function() {
$scope.records.unshift("saddfadffas")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl" class="container">
<p>
<h3>Status: </h3>
<input type="text" ng-model="additem">
<button ng-click="addArray()">function</button>
</p>
<ul ng-repeat="x in records">
<li>{{x}}</li>
</ul>
</div>
You can resolve this issue by having the items in your array be keyed by their position rather than their value. To do this, you can use track by $index. Hope this helps!
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = ["Testing Task 5.1", "Downloaded Task 5.1"];
$scope.addArray = function() {
$scope.records.unshift("saddfadffas")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl" class="container">
<p>
<h3>Status: </h3>
<input type="text" ng-model="additem">
<button ng-click="addArray()">function</button>
</p>
<ul ng-repeat="x in records track by $index">
<li>{{x}}</li>
</ul>
</div>
Try push rather thanunshift? Sorry I am not at my computer right now so can't verify this, but I'm pretty sure this will solve the problem
EDIT: Perhaps your intention is
$scope.records.unshift($scope.additem)
rather than
$scope.records.unshift("saddfadffas")
but I am assuming you are perhaps running into an error we can't see from the excerpt you posted.
Here is my problem : Maps inside a hidden div are not shown
possible solution :
<div [hidden]="!showMap">
<sebm-google-map #myMap></sebm-google-map>
</div>
<button (click)="showMap = true; myMap.triggerResize()">resize</button>
This could work with a simple 1 variable, in my case I have dynamic creation of theses div, so i cannot point to #myMap so easily
This is for calling triggerResize() on all <sebm-google-map> elements:
<div *ngFor="let item of items"> <!-- just some ngFor for demo -->
<button #myMap (click)="showMap = true; doTriggerResize()">resize</button>
</div>
#ViewChildren('myMap') viewChildren:QueryList;
doTriggerResize() {
this.viewChildren.toArray().forEach((e) {
e.triggerResize();
});
}
I am developing an website with AngularJS and
mobile angular UI.
I have a menu bar which will show on clicking a button and should be closed when I click the options in it. But it isn't working as expected.
My files:
index.html
<div id="menuBar" ng-show="showMenu">
<div class="row">
page1
</div>
</div>
js for hiding menu
app.controller('mainController', function ($rootScope, $scope) {
$rootScope.showMenu = false;
$rootScope.$on("$routeChangeStart", function () {
$rootScope.showMenu = false;
});
});
So while switching to some other file the menu should hide ideally. But it didn't happen so.
The problem is how you show your menu. With this code:
<div ng-click="showMenu=!showMenu" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
you change showMenu property of the child scope. This showMenu is not the same as $rootScope.showMenu. For this reason when you change $rootScope.showMenu in $routeChangeStart it doesn't effect child scope property. Instead you should do something like this:
<div ng-click="toggleMenuBar()" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
and in controller:
$scope.toggleMenuBar = function() {
$rootScope.showMenu = !$rootScope.showMenu;
};
I apologize if I worded the question incorrectly, I am attempting to build a survey builder and I am running into a problem. Here is the link to an example plunker:
Updated:
plunker
JS:
(function() {
var app = angular.module('FormBuilder');
var stageController = function($scope, componentBuilder) {
//var test = "<div>test<button>Im a Button</button></div>";
$scope.components = [];
$scope.components2 = [];
$scope.selectedComponentIndex = -1;
//$scope.list = [{html:test}];
//$scope.componentSettings = "";
$scope.showComponentSettings = function(componentName, index) {
$scope.componentSettings = componentName;
$('#navTab a[href="#componentSettingsPage"]').tab('show');
};
$scope.addMultipleChoice = function() {
var component = componentBuilder.createMultipleChoice();
$scope.components2.push(component);
$scope.components.push(component.name);
};
$scope.addTextEntry = function() {
var component = componentBuilder.createTextEntry();
$scope.components.push(component);
};
$scope.addReadOnlyTextEntry = function() {
var component = componentBuilder.createReadOnlyTextEntry();
$scope.components.push(component);
};
$scope.delete = function(index) {
$scope.components.splice(index, 1);
};
};
app.controller("stageController", stageController);
}());
HTML:
<body>
<div ng-controller="stageController">
<!-- div>
<div ui-sortable="" ng-model="list">
<div ng:repeat="item in list" class="item">
{{item}}
</div>
</div>
</div-->
<div>
Value of scope.inner = {{components}}
</div>
<div style="display: table-row">
<div ng-include="" src="'nav.html'" style="width: 300px; display: table-cell;"></div>
<div ng-include="" src="'stage.html'" style="display: table-cell;"></div>
</div>
</div>
<script type="text/ng-template" id="multipleChoice">
<div class="multipleChoice"></div>
</script>
<script type="text/ng-template" id="textEntry">
<div class="textEntry"></div>
</script>
<script type="text/ng-template" id="readOnlyTextEntry">
<div class="readOnlyTextEntry"></div>
</script>
UPDATED question and example:
Please see my current plunker for the problem I am having. The plunker shows an example form builder that allows a user to added various components to build a form, this example allows multiple choice, text entry, and read only text entry components.
The left nav contains two tabs, one for the components and another for custom settings such as changing the question label or adding more choices to a component. My current problem is that I don't know the best method/practice to bind elements on the item settings to a specific form component in the collection.
So if a user adds a multiple choice component, clicks on it, it will show the item settings, and then be able to modifying the component settings for that specific component.
I hope this is more clear, any help is appreciated, thank you in advance.
I'm trying to use accordion and html content in this way:
<accordion>
<accordion-group ng-repeat="item in items">
<accordion-heading>
<a class="btn btn-primary btn-block btn-elenco">
<img postsrc="img/flag/flag_{{item.index}}.jpg">
</a>
</accordion-heading>
<p ng-bind-html="item.content"></p>
</accordion-group>
</accordion>
AND
var items = [];
for(var i=0;i<10;i++){
var content = "<div>TEST</div>";
items.push({index:i,content:content});
}
$scope.items = items;
var app = angular.module('MyApp',['ngSanitize','ui.bootstrap']);
Accordion works but html isn't rendered into p tag.
What could be the problem?
EDIT
If i try something like:
<div ng-bind-html="to_trusted(item.content)"></div>
And add function to controller:
$scope.to_trusted = function(html_code)
{
console.log(html_code);
return $sce.trustAsHtml(html_code);
}
Nothing changes and in console i get many "undefined"!
This is because the HTML content is declared unsafe by Angular due to it's Strict Contextual Escaping.
Another SO answer already explains clearly how this can be solved: HTML injection, that is if you are using Angular version 1.2.0 or up.
I created a Plunkr to match your case.