I have a list of items. Each item is in div. i want to show only first item enable except others shows disabled.
AngularJs
angular.module('example', [])
.controller('myCtrl', function Ctrl($scope) {
$scope.items = [1,2,3];
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="example" ng-controller="myCtrl">
<div ng-repeat="item in items">{{item}}</div>
</div>
simply by using $first attribute:
<div ng-app="example" ng-controller="myCtrl">
<div ng-repeat="item in items" ng-disabled="!$first">{{item}}</div>
</div>
beware: ng-disabled works with form elements. see documentation for details.
you can do this using $first.
angular.module('example', [])
.controller('myCtrl', function Ctrl($scope) {
$scope.items = [1,2,3];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="example" ng-controller="myCtrl">
<div ng-repeat="item in items"><span ng-if="$first">{{item}}</span>
<span ng-if="!$first">do whatever you want with this item {{item}} </span>
</div>
</div>
Try this snippet.
angular.module('example', [])
.controller('myCtrl', function Ctrl($scope) {
$scope.items = [1,2,3];
});
.disable {
color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="example" ng-controller="myCtrl">
<b>First way</b>
<div ng-repeat="item in items track by $index">
<input ng-disabled="$index != '0'" type="text" value="do whatever you want with this item {{item}}"/>
</div>
<br/>
<b>Second way</b>
<div ng-repeat="item in items">
<input ng-disabled="!$first" type="text" value="do whatever you want with this item {{item}}"/>
</div>
<br/>
<b>Third way</b>
<div ng-repeat="item in items">
<span ng-class="{'disable': !$first}">do whatever you want with this item {{item}}</span>
</div>
</div>
<div ng-app="example" ng-controller="myCtrl">
<div ng-repeat="item in items" ng-class='{disable:!$first}' >{{item}}</div>
</div>
Using disable class we can only apply disable css if someone did change from console then it will break so i did as followed
<div ng-app="example" ng-controller="myCtrl">
<div ng-repeat="item in items" ng-class="{'disabled-me': !($index==0)}">
<span ng-click="($index!=0) ? false : xyx(item)">{{item}}</span></div>
</div>
And in css
.disabled-me,.disabled-me span{color: #777 !important;cursor: default;}
Related
I have $scope.data that is already displaying to the screen using ng-repeat , I have a input where user can search from $scope.data , So i created filter if user search text matched with $scope.data highlight that text ,its not throwing any exception but also not highlighting the text, I am fairly new to angularjs filters help will be much appreciated. Thanks in advance.
ctrl.js
$scope.data = ["Lorem Ipsum is simply dummy text", "Lorem Ipsum is simply dummy text"];
main.html
<div class="row search-input-margin">
<div class="col-md-12 form-group">
<div class="col-md-3">
<label for="search">Search Logs:</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="search" ng-model="vm.searchLog">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul style="list-style: none;">
<li ng-repeat="message in data track by $index"><span><strong>Log:</strong></span><span>{{message}}</span></li>
</ul>
</div>
<div>
<ul>
<!-- filter code -->
<div ng-repeat="item in data | filter:vm.searchLog"
ng-bind-html="item | highlight:vm.searchLog">
</div>
</ul>
</div>
</div>
filter.js
angular.module('App').filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
You are missing style for the .highlighted class
var app = angular.module("sa", []);
app.controller("FooController", function($scope) {
$scope.data = ["Lorem Ipsum is simply dummy text", "Lorem Ipsum is simply dummy"];
});
app.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('(' + phrase + ')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
.highlighted {
font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div ng-app="sa" ng-controller="FooController as vm">
<div class="row search-input-margin">
<div class="col-md-12 form-group">
<div class="col-md-3">
<label for="search">Search Logs:</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="search" ng-model="vm.searchLog">
</div>
</div>
</div>
<ul>
<!-- filter code -->
<li ng-repeat="item in data | filter: vm.searchLog" ng-bind-html="item | highlight:vm.searchLog">
</li>
</ul>
</div>
<div ng-repeat="item in data | filter:vm.searchLog"
ng-bind-html-unsafe="item | highlight:vm.searchLog">
</div>
Why don't you use ng-bind-html-unsafe here? and if you are using ng-bind-html are you loading angular-sanitize.min.js
A more detailed link here:
AngularJS : Insert HTML into view
I have the following code:
<div ng-repeat="list in [[1,2,3,4], [1,2,3,4]] track by $index">
<div id="{{counter}}" ng-repeat="listChild in list track by $index">
{{listChild}}
</div>
</div>
I want to make counter be the number of the element but relative to the whole parent array. How can I make it work so the divs count continuously and not as two individual arrays. to be something like this:
<div>
<div id="1">
{{listChild}}
</div>
<div id="2">
{{listChild}}
</div>
<div id="3">
{{listChild}}
</div>
<div id="4">
{{listChild}}
</div>
</div>
<div>
<div id="5">
{{listChild}}
</div>
<div id="6">
{{listChild}}
</div>
<div id="7">
{{listChild}}
</div>
<div id="8">
{{listChild}}
</div>
</div>
The code below accounts for varied array lengths within the parent array. $scope.precedingCount tracks the rolling total up to the start of a given inner array
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.counter = 0;
$scope.data = [[1,2,3,4], ['a','b','c','d', 'e', 'f'], ['any', 'other', 'data', 'needed']];
$scope.precedingCount = {
0: 0
};
for(var i=1; i<$scope.data.length; i++) {
$scope.precedingCount[i] = $scope.precedingCount[i-1] + $scope.data[i-1].length
}
$scope.combinedIndex = function(oIndx, iIndx) {
return $scope.precedingCount[oIndx] + iIndx
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="list in data track by $index" ng-init="outerIndex = $index">
<div id="{{combinedIndex(outerIndex, $index)}}" ng-repeat="listChild in list track by $index">
{{listChild}} - {{counter}} - {{outerIndex}} - {{$index}} - {{combinedIndex(outerIndex, $index)}}
</div>
</div>
<br />
<br />
<div>
The count of the previous indices: {{precedingCount}}
</div>
</div>
You could use an external variable that will keep the number of listChild
<div ng-repeat="list in [[1,2,3,4], [1,2,3,4]] track by $index">
<div id="{{counter}}" ng-repeat="listChild in list track by $index" ng-init="counter += 1">
{{listChild}}
</div>
</div
Here is my code , i take it from w3school.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
</script>
<title>Home Page</title>
</head>
<body>
<div ng-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name">
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
</html>
ng-repeat in second block is not working.
here is the output i get on browser
Please help me out
Angular only bootstraps the first found application on the page, i.e. the first container with ng-app attribute. The second one you put, ng-app="" will be ignored. Although, you could manually bootstrap the second one with angular.bootstrap method, in your case it makes more sense to wrap entire body into the same app and remove the second ngApp directive:
<body ng-app="myApp">
<div ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name :
<input type="text" ng-model="name" />
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
Demo: http://plnkr.co/edit/UXTGEWOaRu82WpeOvuOz?p=preview
you can have only one ng-app in html page
so change your code as
<body ng-app="myApp">
<div ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name :
<input type="text" ng-model="name" />
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
The problem is, that only one ng-app can be automatically bootstrapped per webpage. So the second ng-repeat does not get parsed because it is not contained within an app.
You need to manually bootstrap your apps with angular.bootstrap()
https://docs.angularjs.org/api/ng/function/angular.bootstrap
This part of your code
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
does not have an ng-app
ng-repeat only works within an ng-app
For some reason , I could not use ng-include in my main page..
Right now i need an alternative solution to ng-include as my product environment(Microsoft Excel Online is not initializing having ng-include on the main page).
Also, I dont want to use ng-view as i have to stick to single route.
FYI, My ng-include url will point to a html template containing its own controller and its scope variables.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div ng-include="content.url"> </div>
</div>
</div>
</body>
controller.js
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
});
views/templates/mycontent.html:
<div class="flat-footer" ng-controller="FooterCtrl">
<div class="icon-home" ng-click="settings=false;help=false;gohome()">
</div>
<div class="icon-question" ng-click="settings=false;help=!help;showHelpPreview()" ng-init="help=false">
<div class="arrow-down" ng-show="help"/>
</div>
<div class="icon-cog" ng-init="settings=false" ng-click="settings=!settings;help=false" ng-show="isloggedIn">
<div class="arrow-down" ng-show="settings" />
</div>
<div class="settings-list" ng-show="settings">
<div class="pull-right icon-cancel-circle" ng-click="settings=!settings;help=false"/>
<button type="button" class="btn btn-primary logout" ng-click="settings=!settings;help=false;logout()">Logout</button>
</div>
<div class="help-option" ng-show="help">
<div class="pull-right icon-cancel-circle" ng-click="help=!help;settings=false"/>
<div>
<h1 class="title">//showHelpForUsecase.name//</h1>
<p class="title-description">//showHelpForUsecase.description// </p>
<dl>
<dt class="welcome-title"> //showHelpForUsecase.subtitle// </dt>
<dd class="welcome-definition"> //showHelpForUsecase.subdescription//</dd>
</dl>
</div>
<div class="footer-help-info">
<p class="more-info">More Info</p>
</div>
<div class="help-buttons-group">
<button type="button" class="btn btn-default help-go-back-btn" ng-click="help=!help;settings=false">Back</button>
</div>
</div>
</div>
I want to remove the ng-include in the main page and load the mycontent.html into "div.container-content" element on loading.
Note : Using bind-html-unsafe attribute instead of ng-include not compiling the html template and just binds the html content and resulting inner html content is not bound to its controller at all.
Please help me with a solution for this.
Regards,
Ram
bind-html-unsafe attribute is the possible workaround for ng-include.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div bind-html-unsafe="content"> </div>
</div>
</div>
</body>
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
$http.get('views/templates/mycontent.html', {cache: $templateCache}).success(function(data) {
var newScope = $scope.$new();
$scope.content = $compile(data)(newScope);
});
});
I have a JSON object which I am repeating with ng-repeat, the keys are strings, and the values are an array. I am listing each of the values as a checkbox. I would like to create a second object which contains a list of only the checkboxes that are checked. I want to preserve the structure of the object with keys and values.
I'm unsure how to bind this to a model properly so that the structure is preserved.
http://jsfiddle.net/NDFc2/3/
This is my HTML
<h3 >Dynamic data binding in AngularJS</h3>
<div ng-app ng-controller="Controller" class="container">
<h4>Inputs</h4>
<ul ng-repeat="(parent, values) in inputs">
<span>{{parent}} : </span>
<li ng-repeat="value in values"><label>{{value}}
<input type="checkbox" ng-model="output[parent]" ng-checked="output[parent]" value="value" >
</input></label>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>
{{key}} : {{output[key]}}
</li>
</ul>
</div>
and my JS
function Controller($scope) {
$scope.output = {};
$scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
}
Is there some simple way to do this? I have the feeling that I'm missing something minor and this will all work nicely.
My examples have your angular logic in the recommended syntax (non-global). There were also several issues with your markup that I have corrected.
In this example, ng-model="x" is a placeholder that I don't use, but ng-model must be present or an error is thrown. I am using ng-change to handle the link between the checkboxes and $scope.outputs.
Live demo here (click).
Markup:
<div ng-app="myApp" ng-controller="myCtrl">
<h3 >Dynamic data binding AngularJS</h3>
<h4>Inputs</h4>
<ul>
<li ng-repeat="(typeKey, typeVal) in inputs">
<span>{{typeKey}} : </span>
<ul>
<li ng-repeat="value in typeVal">
<label>{{value}}
<input
type="checkbox"
ng-model="x"
ng-change="setOutput(typeKey, $index, value)"
>
</label>
</li>
</ul>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>{{key}} : {{outputs[key]}}</li>
</ul>
</div>
JavaScript:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.outputs = {};
$scope.inputs = {
'category': ['one','two','three'],
'color':['blue','green']
};
$scope.setOutput = function(typeKey, $index, value) {
$scope.outputs[typeKey] = $scope.outputs[typeKey] || [];
$scope.outputs[typeKey][$index] = value;
};
});
Another Solution
Live demo here (click).
First, I used ng-init to dynamically add the first-level properties from inputs to outputs. Then you just needed to set your ng-model and ng-checked properties to the correct location in outputs.
Markup:
<div ng-app="myApp" ng-controller="myCtrl">
<h3 >Dynamic data binding AngularJS</h3>
<h4>Inputs</h4>
<ul>
<li
ng-repeat="(typeKey, typeVal) in inputs"
ng-init="outputs[typeKey] = outputs[typeKey] || {}">
<span>{{typeKey}} : </span>
<ul>
<li ng-repeat="value in typeVal">
<label>{{value}}
<input
type="checkbox"
ng-model="outputs[typeKey][value]"
ng-checked="outputs[typeKey][value]"
value="outputs[typeKey][value]"
>
</label>
</li>
</ul>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>{{key}} : {{outputs[key]}}</li>
</ul>
</div>
JavaScript:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.outputs = {};
$scope.inputs = {
'category': ['one','two','three'],
'color':['blue','green']
};
});
You need to bind to the value for the parent, as checkboxes don't work like that. Here's an example:
<h3 >Dynamic data binding in AngularJS</h3>
<div ng-app ng-controller="Controller" class="container">
<h4>Inputs</h4>
<ul ng-repeat="(parent, values) in inputs">
<span>{{parent}} : </span>
<li ng-repeat="value in values"><label>{{value}}
<input type="checkbox" ng-model="output[parent][value]" ng+checked="output[parent][value]" value="value" >
</input></label>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="(key,value) in inputs">
<li>
{{key}} : {{output[key]}}
</li>
</ul>
</div>
And in the controller create the keys beforehand
function Controller($scope) {
$scope.output = { 'category': {}, color: {} };
$scope.inputs = {'category': ['one','two','three'], 'color':['blue','green']};
}
jsfiddle: http://jsfiddle.net/5eeVc/
Have a look at this plunk, i have handled two different scenarios. Just sharing it as a knowledge article
Plunk
<h3>First Scenario <small>Handling JSON source </small></h3>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4>Available options</h4>
<div ng-repeat="item in itemList">
<mark>{{item.name}}</mark>
<input type="checkbox" ng-model="modelContainer[$index].checked" />
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4 class="text-success">Selected options</h4>
<ul>
<li ng-repeat="item in modelContainer | filter: {checked:true}">
{{item.item.name}} X
</li>
</ul>
</div>
</div>
</div>
<br>
<p class="text-danger">itemList</p>
<code>{{itemList}}</code>
<br>
<br>
<p class="text-danger">modelContainer</p>
<code>{{modelContainer}}</code>
<hr>
<h3>Second Scenario <small>Handling map Source </small></h3>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4>Available options</h4>
<div ng-repeat="item in Maplist">
<mark>{{item}}</mark>
<input type="checkbox" ng-model="modelContainer1[$index].checked" />
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4 class="text-success">Selected options</h4>
<ul>
<li ng-repeat="item in modelContainer1 | filter: {checked:true}">
{{item.name}} X
</li>`enter code here`
</ul>
</div>
</div>
</div>