Assume this model:
<li ng-repeat="item in documentViews" for ={{item}}>
<div class="col-sm-12 document-view-item" ng-click="change($index)">
<div class="row">
<img class="document-view-img" src="../assets/images/kml_document.png">
</div>
<div class="row">
<input type="radio" ng-model="prefs.documentView" ng-value="item.value" id="{{item.value}}" name="documentView" ng-selected="prefs.documentView">
{{item.key}}
</input>
</div>
</div>
</li>
And this controller:
angular.module('app')
.controller('DocumentViewCtrl', function ($scope) {
$scope.subtitle = 'Default document view';
$scope.documentViews = [
{
key: 'Blah1',
value: 'b1'
},
{
key: 'Blah2',
value: 'b2'
},
];
$scope.change = function($index) {
console.log($scope.documentViews[$index].value);
};
});
I do not want to update the radio button only when selecting the input tag, but when clicking on the higher div element where the ng-click appears. I couldn't get further than triggering a console log when a click occurs and this is fine, but I am wondering how to update the select on the radio button and thus the $scope.
What about something like this?
In your html:
<li ng-repeat="item in documentViews" for="{{item}}">
<div class="col-sm-12 document-view-item" ng-click="change(item)">
<div class="row">
<img class="document-view-img" src="../assets/images/kml_document.png">
</div>
<div class="row">
<input type="radio" ng-model="prefs.documentView" ng-value="item.value" id="{{item.value}}" name="documentView" ng-selected="prefs.documentView">
{{item.key}}
</input>
</div>
</div>
</li>
In your controller:
$scope.change = function(item) {
$scope.prefs.documentView = item.value;
}
Related
I have this ngRepeat. I want to create some sort of toggle, so that when the user clicks on the button, the input shows, however, I want all other shown inputs to hide (if they are already visible).
<ul>
<li ng-repeat="(key, value) in jewel">
<span ng-show="!showMe">text here</span>
<input ng-show="showMe">
<button ng-click="showMe = true"></button>
</li>
</ul>
Hope this makes sense.
ng-repeat has isolated scope, that is why to influence all other inputs you need to track their visibility via variable from parent scope. I've prepeared a fiddle with example: http://jsfiddle.net/ancvgc1b/
angular
.module('myApp', ['ui.bootstrap'])
.controller('ExampleController', function($scope){
$scope.jewel = {
key1: 'Foo',
key2: 'Bar'
};
$scope.visible = { key: 'key1' };
$scope.setVisible = function(key) {
$scope.visible.key = key;
}
});
<body ng-app="myApp">
<div ng-controller='ExampleController'>
<ul>
<li ng-repeat="(key, value) in jewel">
<span ng-show="!(visible.key == key)">Text value</span>
<input ng-show="visible.key == key">
<button ng-click="setVisible(key)">show input</button>
</li>
</ul>
</div>
</body>
Quick fix:
<ul ng-init="active={}">
<li ng-repeat="(key, value) in jewel">
<span ng-show="!($index==active.index)">text here</span>
<input ng-show="$index==active.index">
<button ng-click="active.index = $index"></button>
</li>
</ul>
If you are using controllerAs, it leads to much cleaner code as follows:
(vm is your alias to controller)
<ul>
<li ng-repeat="(key, value) in jewel">
<span ng-show="!($index==vm.activeIndex)">text here</span>
<input ng-show="$index==vm.activeIndex">
<button ng-click="vm.activeIndex = $index"></button>
</li>
</ul>
Try this :
var app = angular.module('myApp', []);
app.controller('MyCtrl',function($scope) {
$scope.people = [
{
id: 1,
name: "Alpha",
age: "24",
clicked : false
},
{
id: 2,
name: "Beta",
age: "25",
clicked : false
}
];
$scope.showInput = function(person,index) {
person.input = true;
$scope.index = index;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
<li ng-repeat="person in people">
<span ng-show="(!person.input && (index != $index))">text here</span>
<input ng-show="(person.input && (index == $index))">
<button ng-click="showInput(person,$index)">Show Input</button>
</li>
</ul>
</div>
i want to show the filter selected checkbox item in the angular material chips
<h2 class="md-title">Use the default chip template.</h2>
<md-chips ng-model="items" readonly="readonly"></md-chips>
<div layout="column">
<div flex><h2>Filter</h2></div>
<div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
<md-checkbox ng-checked="exists(item, selected)" ng-click="toggle(item, selected)">
{{ item }}
</md-checkbox>
</div>
</div>
You could do it like this - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<h2 class="md-title">Use the default chip template.</h2>
<md-chips ng-model="selectedItems" readonly="readonly">
<md-chip-template>
{{$chip.name}}
</md-chip-template>
</md-chips>
<div layout="column">
<div flex><h2>Filter</h2></div>
<div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
<md-checkbox ng-model="item.selected" ng-click="toggle($index)">
{{ item.name }}
</md-checkbox>
</div>
</div>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope) {
$scope.items = [
{name:"John", selected: true},
{name:"Paul", selected: true},
{name:"George", selected: true},
{name:"Ringo", selected: true}
];
$scope.selectedItems = angular.copy($scope.items);
$scope.toggle = function (index) {
if ($scope.items[index].selected) {
$scope.selectedItems.splice(index, 1);
}
else {
$scope.selectedItems.splice(index, 0, $scope.items[index]);
}
}
});
I need some thing like bellow.When i click on checked box that should be add to the cart with which item i have checked all the details should be list on the cart.How can i acheive it?
<div ng-app="MyApp" ng-controller="MyCart" >
<div ng-repeat="x in names">
<input type="checkbox" name="item">{{x.item}} {{x.price}} </input>
</div>
<div>
<h1>Cart</h1>
<div>Ex. Order Summary 100
//here i need to show the order price </div>
<div>
EX. 1.xxx Rs.10
2.yyy rs.90
//Here i need to list the items which are checked on the above
</div>
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyCart', ['$scope', '$http', function($scope, $http) {
$http.get('AngularJs-Response.jsp').success(function(response) {
$scope.names = response;
});
}]);
</script>
<div ng-app="myApp" ng-controller="startCtrl">
<div ng-repeat="x in names">
<input type="checkbox" ng-model="item.isSelected" ng-change="value(item.isSelected,x)"/>{{x.name}} {{x.price}}
</div>
<hr/>
<div>Selected Item</div>
<div ng-repeat="y in selectedItems" ng-show="selectedItems.length>0">
{{y.name}}----{{y.price}}
</div>
<div ng-show="selectedItems.length<=0"> No item selected </div>
</div>
Your angular code,
var app=angular.module("myApp",[]);
app.controller("startCtrl",function($scope){
$scope.names=[{name:"mobile",price:"100"},{name:"Laptop",price:"200"},{name:"bag",price:"50"}];
$scope.selectedItems=[];
$scope.value=function(isSelected,item)
{
if(isSelected==true)
{
$scope.selectedItems.push(item);
}
else
{
console.log(item.name); angular.forEach($scope.selectedItems,function(itemRmv,$index){
if(itemRmv.name==item.name)
{
$scope.selectedItems.splice($index,1);
}
})
}
}
});
Working fiddle,
http://jsfiddle.net/zqpxtbzo/
I'm using angular include to insert the html's in the page and below is the code for it.
RightNav.html
<div ng-switch on="page">
<div ng-switch-when="Games">
<div ng-include="'Games.html'"></div>
</div>
<div ng-switch-when="Music">
<div ng-include="'Music.html'"></div>
</div>
<div ng-switch-when="Videos">
<div ng-include="'Videos.html'"></div>
</div>
</div>
LeftNav.html
<ul>
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
JS
app.controller('Nav', function($scope) {
$scope.items = [
{
name : 'Music'
},
{
name : 'Videos'
},
{
name : 'Games'
}
];
$scope.page = $scope.items[0].name;
$scope.selectedItem = function(item) {
$scope.page = item.name;
}
})
I tried using ng-repeat in RightNav.html and it doesn't work what am i doing wrong here?
<div ng-switch on="page">
<div ng-repeat="item in items">
<div class="item.name" ng-switch-when="{{item.name}}">
<div ng-include="'{{item.name}}.html'"></div>
</div>
</div>
</div>
Demo : http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview
In your case you do not need ng-repeat. You can directly bind the expression to ng-include. Also when i tried ng-switch when part does not take expression. Also using the . notation for selected page as the ng-switch and ng-include creates new scope.
See my fiddle
http://plnkr.co/edit/dPILzsyFoWHfL3Urlso2?p=preview
I'm new to angular and i'm trying to use ng-switch to dynamically load templates using include in bootstrap modal but click doesn't seem to work. What am i doing wrong here ?
HTML
ModalContent.html
<div ng-controller="Nav" class="modal-body">
<div class="left-nav" ng-include="'LeftNav.html'"></div>
<div class="right-nav" ng-include="'RightNav.html'"></div>
</div>
LeftNav.html
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
RightNav.html
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<div ng-switch-when="item2">
<div ng-include="'Item2.html'"></div>
</div>
<div ng-switch-when="item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>
JS
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
})
Plnkr - http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview
There were a couple of problems.
Here is a working demo: http://plnkr.co/edit/CZPvD373HbCC2Ism0xlA?p=preview
Comments inline:
Controller
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
$scope.page = $scope.items[0];
$scope.selectItem = function (item) {
$scope.page = item;
}
})
LeftNav template
<ul>
<li ng-repeat="item in items">
<!-- calling `selectItem` on the controller to set the `page`
otherwise `page` will be set on the current `ng-include` scope
and will be unavailable elsewhere -->
{{ item }}
</li>
</ul>
RightNav template
<!-- 'page' is now from the 'Nav' controller's $scope -->
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item2">
<div ng-include="'Item2.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>