Why? html:
<div ng-app="myApp">
<div ng-controller="testCtrl">
<div data-ng-show="{{tags.length > 2}}"><p>{{tags}}</p></div>
<p>{{tags.length > 2}}</p>
</div>
</div>
js:
.controller('testCtrl', function($scope){
$scope.tags = 'Go go go';
});
And shows only 'true'... Why div is hidden?
http://jsfiddle.net/3HT2F/11/
As #user2422960 says, you just need to remove the {{ and }} because ng-show already expects an expression:
<div ng-app="myApp">
<div ng-controller="testCtrl">
<div data-ng-show="tags.length > 2"><p>{{tags}}</p></div>
<p>{{tags.length > 2}}</p>
</div>
</div>
Here is an updated fiddle.
Related
While Using ng-repeat , I need to print only 5 in a row
I have tried as shown below
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<br ng-if="($n+1)%5==0">
</div>
</div>
But all the rows are getting printed in a single row
http://jsfiddle.net/9fR23/474/
You could have it like this:
<div ng-repeat="n in names" style="display: inline">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<div ng-show="($index + 1) % 5 === 0">
<br>
</div>
</div>
working fiddle
<div ng-app = "myApp" ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>
<br ng-if="($index+1)%5==0">
</div>
</div>
Instead of break you can use <p></p> also
Try this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.1.4/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil1", "Tobias2", "Linus3","Emil4", "Tobias5", "Linus6","Emil7", "Tobias8", "Linus9","Emil10", "Tobias11", "Linus12","Emil13", "Tobias", "Linus"];
$scope.selectedNames = [];
$scope.select = function(name) {
var index = $scope.selectedNames.indexOf(name);
if(index < 0)
$scope.selectedNames.push(name);
else
$scope.selectedNames.splice(index, 1);
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<p ng-show="($index+1)%5==0"></p>
</div>
</div>
</body>
</html>
That's decause your divs width are default 100%. Try to use bootstrap grid system instead:
<div ng-app="myApp" ng-controller="myCtrl" class="row">
<div ng-repeat="n in names" class="col-xs-2">
<input type="checkbox" ng-click="select(n)"/>{{n}}
</div>
</div>
http://jsfiddle.net/f4yb539x/
Although you cannot split a row to 5 equal columns directly, only with a workaround with col offsets.
Try this
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<div ng-if="($index+1)%5==0"><br></div>
</span>
</div>
Here's the code snippet of the Angular js app.
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</p>
</div>
i have been learning AngularJS. I cannot understand why this simple example fails to work. I have been followng w3cschools tutorial and the syntax seem to perfect align with it. Is it something to with scoping ? or do i have to bind ng-show with model data.
I also did the following but it doesnot seem to work.
<div ng-app="list" ng-init="thiss = true">
<p ng-controller="myctrl" >
<button ng-click="thiss=false">Click</button>
<p ng-show="thiss"> This is it</p>
</p>
</div>
Why is placing the controller on the div tag works ? But fails to work when it is in the child element?
It does not work because you have a <p> tag within a <p> tag. It should work if you change you code as follows.
<div ng-controller="myctrl" >
<button ng-click="thiss=false">Click</button>
<p ng-show="thiss"> This is it</p>
</div>
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<div ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</div>
</div>
Check out Why <p> tag can't contain <div> tag inside it? for the reason why <p> cannot include block level elements
Please, don't try to make your HTML standard, follow some rule defined by HTML.
Don't put nested <p> tags. AngularJS sometimes don't work for invalid DOM. I used <span> tag instead of nested <p> works fine.
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
<span ng-show="thiss">This is it</span>
</p>
</div>
For more information validate HTML. Please, check following HTML code at: https://validator.w3.org/#validate_by_input
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>
<p>
</p>
</p>
</body>
</html>
Try this. I have just remove ng-controller from <p> and put it inside div with ng-app. don't know the reason behind this behavior of angularjs but it works as you want.
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true" ng-controller="myctrl">
<p>
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</p>
</div>
Try following code.
var app=angular.module("list",[]);
app.controller("myctrl",function($scope){
$scope.get=function(){
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-controller="myctrl">
<p ng-init="thiss=true">
<button ng-click="get()">Click</button>
{{thiss}}
<p ng-show="thiss">Show Content</p>
<p ng-show="!thiss">Hidden Content</p>
</p>
</div>
try after removing the blank array from the dependency
var app = angular.module('list');
make sure that the controller should be placed in <div ng-controller="myctrl">
Your code:
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</p>
this is how a browser interprets html according to DOM :
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
</p>
<p ng-show="thiss">This is it</p>
<p></p>
therefore the scope of your controller "myctrl" does not apply on nested para,
try using div instead of nested <p>
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<div ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</div>
</div>
I am having a bootstrap div with 3 columns as given in the html below and when i have a select control in the first div of the row, the remaining div's don't show up. but if i comment out the same and check with hello world text. All columns show up just like it should be.
not sure what is that i am missing, hence looking out for a new set of eyes to point out what is wrong. :)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div style="text-align:center">
<h1>Wind Monitoring System </h1>
</div>
<div class="row">
<div class="col-md-4" style="background:blue">
<span>Hello World1</span>
<!--<div>
<select id="states" ng-model="selectedState" ng-change="getCities()" size="3" ng-options="state.Name for state in states" />
</div>-->
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World2</span>
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World3</span>
<!--<select id="city" ng-show="selectedState != null" ng-model="selectedCity" size="3" style="height:200px;width:200px" ng-options="city.city for city in cities | filter : {State:selectedState.Name}" />-->
</div>
</div>
</div>
If I'm not mistaken the select tags should be as such <select></select> I believe you are supposed to be binding your options not your <select> tags.
Check this link out
Okay here you go
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="app">
<div class="container-fluid">
<div style="text-align:center">
<h1>Wind Monitoring System </h1>
</div>
<div class="row">
<div class="col-md-4" style="background:blue">
<span>Hello World1</span>
<div ng-controller="Test">
<select ng-model="selectedState" size="3" ng-options="item for item in items"></select>
</div>
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World2</span>
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World3</span>
</div>
</div>
</div>
</div>
JavaScript
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.items = ['one','two','three','four']
});
I believe all I did was add the closing tag.
i have a code in which i want to iterate element inside two differnet row.
Is it Possible to do it using single ng-repeat because i need the above row column structure to be fixed.only content should be dynamic ?
<div class="row sortable">
<div class="col-md-6">
<div class="row">
<div class="col-md-12" ng-repeat="graph in graphs" ng-if="$even">
<div> content.....</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12" ng-repeat="graph in graphs" ng-if="$odd">
<div> content.....</div>
</div>
</div>
</div>
</div>
Just set the ng-repeat as a parent of your rows as follow:
<div class="row sortable">
<div class="col-md-6">
<div class="col-md-12" ng-repeat="graph in graphs">
<div class="row" ng-if="$even">
<div> content.....</div>
</div>
<div class="row" ng-if="$odd">
<div> content.....</div>
</div>
</div>
</div>
</div>
UPDATE
If you don't want to repeat the <div class="row>, you can create an HTML template and use two ng-include with different controllers on the HTML parent. I created a Plunker example:
Parent HTML:
<body ng-app="includeExample">
<div ng-controller="ExampleController">
<div ng-controller="TemplateController1">
<div ng-include="template"></div>
</div>
<div ng-controller="TemplateController2">
<div ng-include="template"></div>
</div>
</div>
</body>
JS File:
(function(angular) {
'use strict';
angular.module('includeExample', ['ngAnimate'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.template = "template1.html";
}])
.controller('TemplateController1', ['$scope', function($scope) {
$scope.foo = "bar";
}])
.controller('TemplateController2', ['$scope', function($scope) {
$scope.foo = "test";
}]);
})(window.angular);
Template:
{{foo}}
How do i increment camp by say 3 instead of 1 , each time over here?
<div class="row" ng-repeat="camp in camps">
<div class="col-lg-3">
<img src={{camp.img}} alt="" height="200pt" width="250pt"/></div>
<div class="col-lg-5 col-lg-offset-1">{{camp.email}}<br/>
<span>{{camp.campname}}</span><br/>
{{camp.about}}<br/>
{{camp.tgtamt}}<br/>
{{camp.enddate}}<br/><br/>
<button id="view" class="btn btn-default" value1='{{camp.campname}}' value2='{{camp.email}}'>View</button>
</div></div>
<hr/>
</div>
You can try to use $index with ng-show. Something like:
HTML
<div ng-controller = "myCtrl1">
<div class="row" ng-repeat="camp in camps">
<div ng-show="$index % 3 == 0"> <pre>{{camp.name}}</pre></div>
</div>
</div>
Controller
var myApp = angular.module('myModule', []);
myApp.controller('myCtrl1', ['$scope', function($scope) {
$scope.camps=
[{name:"name_1"},{name:"name_2"},{name:"name_3"},{name:"name_4"},{name:"name_5"},
{name:"name_6"},{name:"name_7"},{name:"name_8"},{name:"name_9"},{name:"name_10"}];
}]);
Output:
name_1
name_4
name_7
name_10
see Fiddle