I opened the same page in different tabs with different mode and when I pressed one of the button that should fill the inputs, the data filled in the last tab opened, not the tab that has been clicked.
The angular input:
<input type="text"
class="form-control"
id="Type"
style="width:170px;text-align:auto"
ng-model="This_Page.Data.Type"
ng-disabled="This_Page.Action == 'View'"
autocomplete="off">
code:
$scope.This_Page.Data.Type = l_Details.Type;
what should I do to ensure that every tab get only it's data?
EDIT 1:
I guess my question was not clear enough...
I have an application that is built based on TABs, each with its own controller assigned, that open upon request. Some of the tabs serve for dual behavior (same HTML, same Controller code): Create an element (e.g. User Login credentials) and Edit an element (Edit User Credentials).
The issue is that when I open two instances of the same tab, whatever I enter in one of the tabs leaks to the other instance of the same tab.
Hope this makes things clearer.
Thanks!
Use this code:
You can bind with : {{}} and in js return html with : ${}
(function () {
'use strict';
angular
.module('MyApp',['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl ( $scope ) {
$scope.data = {
selectedIndex: 0,
firstDataSet: "First Data set",
secondDataSet: "Second Data set"
};
$scope.selectedTab = function(index) {
if(index === 'one')
return $scope.data.firstDataSet;
if(index === 'two')
return $scope.data.secondDataSet;
}
}
})();
.tabsdemoStaticTabs md-tab-content {
padding: 25px; }
.tabsdemoStaticTabs md-tab-content:nth-child(1) {
background-color: #42A5F5; }
.tabsdemoStaticTabs md-tab-content:nth-child(2) {
background-color: #689F38; }
.tabsdemoStaticTabs md-tab-content:nth-child(3) {
background-color: #26C6DA; }
.tabsdemoStaticTabs .after-tabs-area > span {
margin-top: 25px;
padding-right: 15px;
vertical-align: middle;
line-height: 30px;
height: 35px; }
.tabsdemoStaticTabs .after-tabs-area > md-checkbox {
margin-top: 26px;
margin-left: 0; }
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
<div ng-app="MyApp" class="tabsdemoStaticTabs" ng-controller="AppCtrl" ng-cloak="">
<md-content class="md-padding">
<md-tabs class="md-accent" md-selected="data.selectedIndex">
<md-tab id="1" md-on-select="resultOne = selectedTab('one')">
<md-tab-label>
<h3>My Tab content</h3>
</md-tab-label>
<md-tab-body>
<p>
{{ resultOne }}
</p>
</md-tab-body>
</md-tab>
<md-tab id="2" md-on-select="resultTwo = selectedTab('two')">
<md-tab-label>
<h3>My Tab content</h3>
</md-tab-label>
<md-tab-body>
<p>
{{ resultTwo }}
</p>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
Related
I have a problem with the ui-select directive (AngularJS 1.6.4, Ui-select 0.19.8).
I have created the fiddle here.
It's supposed to show contacts in the dropdown I if type more than 3 chars. (I don't even try to filter anything at the moment, the same list of contacts is returned). It works well the first time, then the other times no dropdown is shown.
I use the async way of returning results so it calls my "refresh" function after 1sec.
Can someone help me understand why no dropdown is displayed after the first time ?
(also, if someone knows why I need to force the display: block for the <ul> tag - cf CSS )
Thanks
HTML
<body ng-app="myApp">
<div body ng-controller="ctrl as ctrl">
<div class="element">
Selected Contacts:<br>
<div ng-repeat="contact in ctrl.contacts" class="contact">
{{ contact }}
</div>
</div>
<ui-select multiple ng-model="ctrl.contacts" class="element">
<ui-select-match placeholder="Pick one...">{{$item}}</ui-select-match>
<ui-select-choices
position="down"
refresh="ctrl.refreshContacts($select.search)"
refresh-delay="1000"
minimum-input-length="3"
repeat="person in ctrl.people">
<div ng-bind-html="person | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<div class="element">
<div ng-repeat="log in ctrl.logs track by $index" >
<div>
{{log}}
</div>
</div>
</div>
</div>
</body>
JS
var myApp = angular.module('myApp', ['ngSanitize','ui.select']);
myApp.controller("ctrl", [function () {
var ctrl = this;
ctrl.logs=[];
ctrl.refreshContacts = function(search) {
var people = [
"mickael",
"pierre",
"anna",
"alice",
"bob"
];
ctrl.people = people;
ctrl.logs.push("refreshContacts called")
}
ctrl.people = [];
}]);
CSS
.element {
margin-bottom: 20px;
}
.contact {
display: inline-block;
margin: 5px;
padding: 5px 8px;
background: grey;
}
/* why do I need this ?! */
.ui-select-choices {
display: block;
}
If I am remembering correctly there is a bug when using both minimum-input-length and refresh. I solved this problem by removing minimum-input-length and adding an if statement inside refresh function.
ctrl.refreshContacts = function(search) {
if(search == undefined || search.length < 3){
return;
}
else{
people = [
"mickael",
"pierre",
"anna",
"alice",
"bob"
];
ctrl.people = people;
}
}
I have a very simple app that has a splitter (onsenui) menu that opens different templates from index.html.
In index.js I declare a controller that should be bound to one of the template pages in index.html. I can follow with the debugger and watch the controller code be accessed during the first time the page is loaded, I assume it is being called on initial assignment, but afterwards the method advance() is never called when the button that should call it is pressed.
The method is assigned to the button using the ng-click directive.
Everything else works, it is only the controller and onclick that is not.
index.html :
<template id="traditionalrosary.html">
<div>
<ons-page id="traditionalrosary" ng-controller="traditionalRosaryController">
<link rel="stylesheet" href="css/traditionalrosary.css">
<body>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Logo
</div>
</ons-toolbar>
<ons-card style="width:25vw; height 50vh; margin: auto;">
<img id="logoImage" class="img-responsive" src="img/logo.jpg" style='height=33vh; width=33vw; object-fit: cover; margin: auto;'>
</ons-card>
<ons-card style='left:50vh; width:75vw; height 50vh; margin: auto; object-fit: contain;'>
<textarea class="textarea" ng-model="textstuff" ng-init="textstuff = 'Hello now'" style="display: block; width: 100%; height 50vh; object-fit: contain; margin: auto; " value="OK" ' rows="10" placeholder="Textarea">
</textarea>
</ons-card>
<ons-button modifier="large" ng=click="advance()">advance</ons-button>
</body>
</ons-page>
</div>
</template>
controllers.js:
myApp.controller("traditionalRosaryController", function($scope) {
$scope.textstuff="nom nom";
$scope.advance=function()
{
$scope.textstuff="awesome";
};
});
index.js
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
};
You have a typo in your HTML
Change ng=click="advance()" to ng-click="advance()"
Note the dash rather than the equals sign.
I'm writing a page that has angular in it that responds to ajax requests and loads various data into a table. The angular works as expected when I type in the address, but if I use a link ( link ) to get to the page, the controller fails to load (but the html shows up). There are no page errors in the console except a resource not loaded for an image because the url is not being loaded by the angular. Here is my code:
<h1 style="text-align: center;">Product Search</h1>
<input type="text" class="form-control" placeholder="Search (Ex. ea-004, Christmas)..." id="search" style="margin-left: auto; margin-right: auto; margin-bottom: 15px;">
<div ng-app="search_results" style="text-align: center; margin-left: 0px; margin-right: 0px;">
<div ng-controller="search_results_ctl" style="text-align: center; margin-left: 0px; margin-right: 0px;">
product{{JSON.stringify(product)}}
<style>
.product:hover{
background-color: #DDDDDD;
cursor: pointer;
border:0px solid grey;
border-radius: 5px;
}
.product-selector:hover {
color: black;
}
</style>
<script>
var app = angular.module("search_results", ['angularUtils.directives.dirPagination']);
app.controller("search_results_ctl", ['$scope', function($scope){
console.log("Angular loaded...");
$scope.results = "";
$('#search').keypress(function(ev){
if(ev.which != 13){//do not add enter to search text, just submit query again
s_term = $('#search').val() + String.fromCharCode(ev.which);//append last character typed
}else{
s_term = $('#search').val();
}
$.ajax({
url: "/query",
data: {s_term: s_term},
success: function(data){
//console.log("products: " + data);
$scope.products = JSON.parse(data);
$scope.$apply();
}
});
});
}]);
</script>
<span ng-if="products != null">
<div style="width: 80%; margin: auto !important;
" dir-paginate="product in products | itemsPerPage: 10" class="row product">
<a href="/orders/new?product_id={{product.id}}" class="product-selector">
<div class="col-md-3 col-sm-3">{{product.title}}</div><div class="col-md-6 col-sm-6">{{product.description}}</div><div class="col-md-3 col-sm-3" style="text-align: center"><img src='{{product.image}}' width="50px" height="50px" style="margin-top: auto; margin-bottom: auto;"></div></a>
</div>
</span>
<span ng-if="products == null" >
<div style="background-color: #DDDDDD; border: 0px solid grey; border-radius: 5px;">
<h3 style="text-align: center;">Creating an Order</h3>
<p><strong>To start</strong>, type in the product code from the website or a key word like "christmas" or "sports". Click the product you would like to order, and it will take you to the order page.</p>
</div>
</span>
<dir-pagination-controls></dir-pagination-controls>
</div>
</div>
the link that is directing my to the page uses an href of "/products/search", which is the correct route.
Any help would be most appreciated!
Turns out after some further reading turbolinks was causing the problem. Turbolinks does not allow a full page reload, so angular never got fully bootstrapped. Here is a more thorough post on the issue: Using angularjs with turbolinks
I'm developing an AngularJS Ionic Meteor app, and I need to change the background color of the botton box of an ionic card depending of it contents (a float). The ranges are:
data<=80
81 < data <= 160
161 < data <= 233
234 < data<= 317
318 < data <= 400.
Is there a CSS way to do it, or an AngularJS way instead?
You could use ngClass. Just setup your CSS background-color properties and set in your controller the appropriate class, for example:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.submit = function() {
if ($scope.data <= 80) $scope.rangeColor = "red";
// Add more conditional statements
else $scope.rangeColor = "blue";
}
}
.card {
border-style: solid;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h4>Data:</h4>
<form ng-submit="submit()">
<input type="text" name="data" ng-model="data" required>
<input type="submit" id="submit" value="Submit" />
</form>
<br />
<div ng-class="rangeColor" class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</div>
</body>
You could also implement the conditional statements in your HTML elements:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
}
.card {
border-style: solid;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h4>Data:</h4>
<input type="text" name="data" ng-model="data" required>
<br />
<br />
<div ng-class="{'red': data <= 80, 'blue': data > 80}" class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</div>
</body>
You could use
ng-style
https://docs.angularjs.org/api/ng/directive/ngStyle
or
ng-class
HTML page in AngularJS.
My ng-show won't show div when boolean is set true.
This is my HTML file:
<div class="container">
<div ng-if="!query" ng-hide="editBoolean">
<h3>{{article.id}} - {{article.title}}</h3>
<h4 ng-bind-html="article.text"></h4>
<button ng-click="edit(true)">Endre tekst</button>
</div>
<div ng-show="editBoolean">
<style>
.ta-editor {
min-height: 300px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
</style>
<input type="text" ng-model="article.title" value="{{article.title}}">
<div text-angular="text-angular" ng-model="article.text"></div>
<button ng-click="update(article.text, article.title)">Lagre</button>
<button ng-click="edit(false)">Avbryt</button>
</div>
<div ng-if="query">
<h3>{{query}}</h3>
</div>
This is my controller.js file:
// Article controller
wikiControllers.controller('articleController', ['$scope', 'articleService', '$routeParams', '$sanitize',
function($scope, articleService, $routeParams, $sanitize){
$scope.editBoolean = false;
$scope.edit = function(editValue){
this.editBoolean = editValue;
console.log(this.editBoolean);
};
}]);
When i have console.log my booleanfil, it shows true(The value is changed)
this:
this.editBoolean = editValue;
should be:
$scope.editBoolean = editValue;