Good morning, I make a loop to catch "name " in an array and each "name " has variables with information. I need the ng -model receive the value of the "name " when I click on the "button" to oh yes I can make a loop in this "name".
div class="list-group" ng-repeat="rep in list.report">
<button type="button" class="list-group-item " ng-model="ctrl.x">
{{rep.name}}
</button></div>
If I understand your question correctly, is this what you're looking for?
https://jsfiddle.net/3ajtoyfm/
Angular
function Controller() {
var vm = this;
vm.rep = null;
vm.reps = [{
name: 'Jimmy Page',
band: 'Led Zeppelin'
}, {
name: 'Ozzy Osbourne',
band: 'Black Sabbath'
}, {
name: 'Trent Reznor',
band: 'NIN'
}];
vm.getRep = getRep;
function getRep(rep) {
vm.rep = rep;
}
}
HTML
<button ng-repeat="rep in ctrl.reps" ng-click="ctrl.getRep(rep)">{{rep.name}}</button>
<br>
<div ng-if="ctrl.rep">
<h4>
Rep
</h4> {{ctrl.rep.name}} - {{ctrl.rep.band}}
</div>
ng-model won't work with the button use ng-click :
<div class="list-group" ng-repeat="rep in list.report">
<button type="button" class="list-group-item" ng-click="ctrl.x = rep.name">
{{rep.name}}
</button>
</div>
Related
I'm trying to create shopping cart, when clicking on one of the products its add to shoping cart.
So, I build an Object that contains all products, and another array that
will contain all clicked item.
When I'm trying to add the value of correct selected item from the products object i'm getting undefined.
var app = angular.module('myApp',[]); app.controller("myCtrl",function ($scope) {
$scope.products =
[
{ name: 'Apple', price: 5, img: '/Apple.jpg' },
{ name: 'Banana', price: 3.7, img: '/Banana.jpg' },
{ name: 'Grapes', price: 10 , img:'/Grapes.jpg' }
];
$scope.addProduct= function () {
$scope.products.push({name:$scope.nameProduct, price:$scope.priceProduct, tmuna:$scope.imgProduct});
$scope.nameProduct = "";
$scope.priceProduct = "";
$scope.imgProduct = "";
};
$scope.cartList = [{ name: 'Apple'}];
$scope.addToCart = function () {
$scope.cartList.push({name:$scope.nameProduct});
$scope.nameProduct = "";
};
});
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
Shopping Cart <span class="glyphicon glyphicon-shopping-cart"></span>
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1" ng-repeat="product in cartList">
<li role="presentation"><a role="menuitem" tabindex="-1" >{{product.name}}</a></li>
</ul>
</div>
<form >
<p>Product: <input type = "text" ng-model = "nameProduct"></p>
<p>Price: <input type = "number" ng-model = "priceProduct"></p>
<p>Image: <input type = "text" ng-model = "imgProduct"></p>
<input type = "submit" value = "Add" ng-click = "addProduct()">
</form>
</div>
<div class="product" ng-repeat="product in products">
<img ng-src="{{product.img}}" />
<div class="name">{{product.name}}</div>
<div class="price">${{product.price}}</div>
<p class="badge" ng-click="addToCart()">Add to<span class="glyphicon glyphicon-shopping-cart"></span></p>
</div>
When you're calling addToCart() the function uses what's on $scope.nameProduct, but that's an empty string. You cleared it on addProduct() function.
Pass the name of the product you're adding:
ng-click="addToCart(product.name)"
And change your function accordingly:
$scope.addToCart = function (productName) {
$scope.cartList.push({ name: productName });
};
You need to pass the product object in the addToCart function like this:
https://jsfiddle.net/Lyrjp92z/
JS
$scope.addToCart = function(product) {
$scope.cartList.push({
name: product.name
});
};
HTML
<p class="badge" ng-click="addToCart(product)">Add to<span class="glyphicon glyphicon-shopping-cart"></span></p>
Also note, that passing in the product object and not just the string will allow you to also pass in the price, which you can calculate a total from.
How can I have a ng-model in a btn-group? It's working like radio buttons, and I need to control the answer every time I click in one specific button.
Here is my code:
<div class="btn-group">
<button type="button" class="btn btn-sm btn-primary"
ng-click="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes = 1"
ng-class="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes == 1 ? [''] : ['btn-info']">
Yes
</button>
<button type="button" class="btn btn-sm btn-primary"
ng-click="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes = 2"
ng-class="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes == 2 ? [''] : ['btn-info']">
No
</button>
<button type="button" class="btn btn-sm btn-primary"
ng-click="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes = 9"
ng-class="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes == 9 ? [''] : ['btn-info']">
Ignored
</button>
</div>
In the end I need to validate these custom "radio buttons". How can I do that?
You can use Bootstrap to style your radio buttons as toggle buttons. This will allow you to keep the input type for use of ng-model and form validation, without using your ng-click method above.
Here is a simple demo in a fiddle.
Controller:
var app=angular.module('myApp', []);
app.controller('MyCtrl', function MyCtrl($scope) {
$scope.people = [{
name: "John"
}, {
name: "Paul"
}, {
name: "George"
}, {
name: "Ringo"
}];
$scope.choices = {};
});
HTML:
<form name="myForm" ng-app="myApp" ng-controller="MyCtrl">
<p>Favorite Beatle</p>
<div class="btn-group-vertical" data-toggle="buttons">
<label class="btn btn-primary" ng-repeat="person in people">
<input type="radio" name="options" id="option1" autocomplete="off" ng-model="choices.SelectedPerson" value="{{person.name}}" required> {{person.name}}
</label>
</div>
<p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p>
You chose: <strong>{{choices.SelectedPerson}}</strong>
<button ng-disabled="myForm.$invalid">Submit</button>
You have very similar buttons code. I advise you to generate them from the model. And you will no problem to link them to controller.
Here is code example:
in controller:
$scope.buttonChecked = 1;
$scope.buttons = [
{
text: 'Yes',
value: 1
}, {
text: 'NO',
value: 2
}, {
text: 'Ignored',
value: 9
}
];
And the view:
<div class="btn-group">
<button ng-repeat="button in buttons" type="button" class="btn btn-sm btn-primary"
ng-click="buttonChecked = button.value"
ng-class="buttonChecked == button.value ? [''] : ['btn-info']">
{{button.text}}
</button>
</div>
I am not sure how do you want represent the changes, but if you will explain that more detail I will edit an answer, hope it will help you!
Updated
I had a situation like that one and I solve it like so:
I used the li to position the buttons and are the "real" clickable element the <button>... are just for looks :D
<ul>
<li ng-repeat="item in buttons" ng-show=item.view ng-click="goToNgRepeat(item.op);" ng-style="{'display':'inline-block'}">
<button class="menuBtn" ng-style="{'width':item.size, 'height':menuButtonHeight}"><b>{{ item.tx }}</b></button>
</li>
</ul>
and solve the which one was pressed with ng-click calling a function and passing a value, the value is defined in the button array:
$scope.buttons = [
{ "tx": "Alm Extn", "op": 0, "view": true, "viewCont": false, "file": "TXT/extn.htm", "size": topicButtonsPos.menuButtonW },
{ "tx": "DS", "op": 1, "view": true, "viewCont": false, "file": "TXT/Ds.htm", "size": topicButtonsPos.menuButtonW },
{ "tx": "CDnt", "op": 2, "view": true, "viewCont": false, "file": "TXT/C.htm", "size": topicButtonsPos.menuButtonW },
{ "tx": "CDnt", "op": 3, "view": true, "viewCont": false, "file": "TXT/CA.htm", "size": topicButtonsPos.menuButtonW },
...
];
This array content op which I use as button value.
Hope it helps.
On my home page I added a button named 'city'. On clicking it opens a popup listing the city names. On clicking the city 'paris' the data with city name must be displayed.
homepage
<ion-header-bar class="bar bar-subheader">
<button class="button button-flat button-positive"ng-click="citypopup();" style="padding-right: 63px;
padding-left: 18px;">
<l >City </l>
<l class="icon ion-chevron-down"></l>
</button>
</ion-header-bar>
<ion-content>
<div class='card ' ng-repeat="item in list | filter:test.searchCity ">
<div class="list " >
<div class='item' style="padding-top:0px;" > {{item.id}}
<l class="item-icon-right" style="padding-left:30%"> {{item.date}} </l>
</div>
<div class='item' style="padding-top:0px;" >{{item.status }}
<l class="item-icon-right" style="text-align:right;">{{item.QCstatus}}</l>
<i class="icon ion-chevron-right"></i>
</div>
<b class='item '> {{item.Factory}} </b>
<l class='item '>{{item.city }}</l>
</div>
popup page
<ion-list>
<ul class="list" ng-model="test.searchCity" ng-repeat="ci in cityList | orderBy:'city' " >
<li class="item" ng-click="test.searchCity">{{ci.city}} </li>
</ul>
</ion-list>
javascript
$scope.test = {
searchCity: null,
};
$scope.cityList = [
{
"city": "Chennai"
}, {
"city": "Banglore"
}, {
"city": "Delhi"
}
];
$scope.list = [
{
id: "#001",
date:"DEC 04 2016",
status: "Successful",
QCstatus: "Approve",
Factory: "ARUN ICE CREAM",
city: "paris"
},
{
id: "#002",
date: "JAN 11 2016",
status: "Successful",
QCstatus: "Approve",
Factory: "Floxtronics",
city: "Delhi"
},
{
id: "#003",
date: "Feb 14 2016",
status: "Bug fixing",
QCstatus: "Approve",
Factory: "Aachi",
city: "Chennai"
}
];
$scope.$watch('test.searchCity', function () {
$scope.test.searchCity = null;
console.log('test.searchCity')
});
$scope.citypopup = function() {
var myPopup = $ionicPopup.show({
scope: $scope,
templateUrl: 'templates/cityTemplate.html',
buttons: [
{ text: 'Cancel',
type: 'button-positive' },
]
});
}
What I need is when I click 'city' button, my city popup appears and when I click on a city nothing happens! Could someone help me?
No need to create another popup page, you can open popup content in citypopup() function
$scope.citypopup = function() {
$scope.popup = $ionicPopup.show({
template:"<ion-list><ul class='list' ng-model='test.searchCity' ng-repeat='ci in cityList | orderBy:city ' ><li class='item' ng-click='searchCity(ci.city)'>{{ci.city}} </li> </ul></ion-list>" ,
title: 'City',
scope: $scope
});
}
$scope.searchCity = function(city){
$scope.test.searchCity = city;
$scope.popup.close();
}
You never assign test.searchCity.
In you popup page code you use ng-click="test.searchCity", where you probably should use ng-click="test.searchCity = ci.city".
Unrelated to your problem (but a matter of correct use of patterns): No need for ngModel in a ul element (it's only for form elements), and ng-repeat makes more sense when used on lis rather than uls.
In conclusion:
<ion-list>
<ul class="list">
<li class="item" ng-repeat="ci in cityList | orderBy:'city' " ng-click="test.searchCity = ci.city">{{ci.city}} </li>
</ul>
</ion-list>
I've done a small working snippet so far to handle 'notes'. But now I do need to add Items at Runtime to my Model.
That's the JSON behind my Model:
[
{
"DocId":"SomeGuid",
"Items":[
{
"Content":"SomeContent",
"Date":"SomeDate",
"OrderBy":0,
"Page":1,
"Title":"SomeTitle"
},
{
"Content":"SomeContent",
"Date":"SomeDate",
"OrderBy":0,
"Page":2,
"Title":"SomeTitle"
}
]
},
{
"DocId":"SomeGuid",
"Items":[
{
"Content":"SomeContent",
"Date":"SomeDate",
"OrderBy":0,
"Page":1,
"Title":"SomeTitle"
},
{
"Content":"SomeContent",
"Date":"SomeDate",
"OrderBy":0,
"Page":2,
"Title":"SomeTitle"
}
]
}
]
I now need to add a new Entry in one of those .Items.
That's my code:
$scope.AddNode = function (docID, page) {
var item;
$scope.data.forEach(function(object) {
if (object.DocId == docID) {
var newNode = { Content: "", Page: page, Title: "Neue Haftnotiz", Date: "16.19.05",Id: 0,Order:0,DocId:docID };
$scope.data[$scope.data.indexOf(object)].Items.push(newNode);
return;
}
});
(btw is there any $scope.data.FindByAttribute('docId',docID)? - I couldn't find anything in this regard)
It'll push the new Item in my array, but won't update my view.
You see the results here: (Black = old, Red = pushed)
My View just doesn't care if there is a new element or not - here's the template:
template: '<div class="root" >\
<div class="group" id="{{groupId}}-{{$index}}" ng-repeat-start="doc in ngModel" sv-root sv-part="doc.Items">\
<div class="groupHeader" ><h4 style="margin-bottom:0px;" >{{doc.DocId}}</h4></div>\
<div class="note panel" ng-repeat="item in doc.Items" sv-element>\
<div class="header">\
<h5>\
<a ng-click="toggleCollapsedStates($parent.$index,$index)" class="anchor" href="#{{groupBaseId}}-{{$parent.$index}}-{{$index}}">{{item.Title}} - Seite: {{item.Page}}</a>\
</h5>\
<div class="button collapsed" id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}-expander" ></div>\
<div id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}-menu" class="collapse">\
<input type="button" class="button delete" ng-click="deleteNode($parent.$index,$index)"/>\
<input type="button" class="button edit" ng-click="editNode($parent.$index,$index)" id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}-edit"/>\
<input type="button" class="button reference" ng-click="openReference($parent.$index,$index)"/>\
</div>\
</div>\
<div id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}" data-parent="#{{groupId}}-{{$parent.$index}}" class="collapse">\
<textarea class="area" maxlength="255" id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}-textarea" readonly>{{item.Content}}</textarea>\
</div>\
</div>\
</div>\
<div ng-repeat-end></div>\
</div>',
$scope.$apply() does the job
And the answer is too short.
I'm developoing a web app and stuck here:
Part of the HTML:
<div class="input-group">
<select name="select" class="form-control input-group-select" ng-options="key as key for (key , value) in pos" ng-model="word.pos" ng-change="addPos()">
<option value="">Choose a POS</option>
</select>
<span class="sort"><i class="fa fa-sort"></i></span>
</div>
<ul class="listGroup" ng-show="_pos.length > 0">
<li class="list" ng-repeat="item in _pos track by $index">
<span>
{{item.pos}}
<span class="btn btn-danger btn-xs" ng-click="delPos($index)">
<span class="fa fa-close"></span>
</span>
</span>
<!-- I wanna add the input which can add more list item to the item.pos-->
<div class="input-group">
<a class="input-group-addon add" ng-class=" word.newWordExp ? 'active' : ''" ng-click="addItemOne()"><span class="fa fa-plus"></span></a>
<input type="text" class="form-control exp" autocomplete="off" placeholder="Add explanation" ng-model="word.newWordExp" ng-enter="addExpToPos()">
{{word.newWordExp}}
</div>
</li>
</ul>
Part of the js:
$scope._pos = [];
$scope.addPos = function () {
console.log("You selected something!");
if ($scope.word.pos) {
$scope._pos.push({
pos : $scope.word.pos
});
}
console.dir($scope._pos);
//console.dir($scope.word.newWordExp[posItem]);
};
$scope.delPos = function ($index) {
console.log("You deleted a POS");
$scope._pos.splice($index, 1);
console.dir($scope._pos);
};
$scope.addItemOne = function (index) {
//$scope.itemOne = $scope.newWordExp;
if ($scope.word.newWordExp) {
console.log("TRUE");
$scope._newWordExp.push({
content: $scope.word.newWordExp
});
console.dir($scope._newWordExp);
$scope.word.newWordExp = '';
} else {
console.log("FALSE");
}
};
$scope.deleteItemOne = function ($index) {
$scope._newWordExp.splice($index, 1);
};
So, what am I wannt to do is select one option and append the value to $scope._pos, then display as a list with all of my selection.
And in every list item, add an input filed and add sub list to the $scope._pos value.
n.
explanation 1
explanation 2
explanation 3
adv.
explanation 1
explanation 2
So I don't know how to generate dynamic ng-model and use the value in javascript.
Normaly should like ng-model="word.newExplanation[item]" in HTML, but in javascript, $scope.word.newExplanation[item] said "item is not defined".
can any one help?
If I've understood it correclty you could do it like this:
Store your lists in an array of object this.lists.
The first object in the explanation array is initialized with empty strings so ng-repeat will render the first explanation form.
Then loop over it with ng-repeat. There you can also add dynamically the adding form for your explanation items.
You can also create append/delete/edit buttons inside the nested ng-repeat of your explanation array. Append & delete is already added in the demo.
Please find the demo below or in this jsfiddle.
angular.module('demoApp', [])
.controller('appController', AppController);
function AppController($filter) {
var vm = this,
explainTmpl = {
name: '',
text: ''
},
findInList = function (explain) {
return $filter('filter')(vm.lists, {
explanations: explain
})[0];
};
this.options = [{
name: 'option1',
value: 0
}, {
name: 'option2',
value: 1
}, {
name: 'option3',
value: 2
}];
this.lists = [];
this.selectedOption = this.options[0];
this.addList = function (name, option) {
var list = $filter('filter')(vm.lists, {
name: name
}); // is it in list?
console.log(name, option, list, list.length == 0);
//vm.lists
if (!list.length) {
vm.lists.push({
name: name,
option: option,
explanations: [angular.copy(explainTmpl)]
});
}
};
this.append = function (explain) {
console.log(explain, $filter('filter')(vm.lists, {
explanations: explain
}));
var currentList = findInList(explain);
currentList.explanations.push(angular.copy(explainTmpl));
}
this.delete = function (explain) {
console.log(explain);
var currentList = findInList(explain),
index = currentList.explanations.indexOf(explain);
if (index == 0 && currentList.explanations.length == 1) {
// show alert later, can't delete first element if size == 1
return;
}
currentList.explanations.splice(index, 1);
};
}
AppController.$inject = ['$filter'];
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="appController as ctrl">
<select ng-model="ctrl.selectedOption" ng-options="option.name for option in ctrl.options"></select>
<input ng-model="ctrl.listName" placeholder="add list name" />
<button class="btn btn-default" title="add list" ng-click="ctrl.addList(ctrl.listName, ctrl.selectedOption)"><i class="fa fa-plus"></i>
</button>
<div class="list-group">Debug output - current lists:<pre>{{ctrl.lists|json:2}}</pre>
<div class="list-group-item" ng-repeat="list in ctrl.lists">
<h2>Explanations of list - {{list.name}}</h2>
<h3>Selected option is: {{ctrl.selectedOption}}</h3>
<div class="list-group" ng-repeat="explain in list.explanations">
<div class="list-group-item">
<p class="alert" ng-if="!explain.title">No explanation here yet.</p>
<div class="well" ng-if="explain.title || explain.text">
<h4>
{{explain.title}}
</h4>
<p>{{explain.text}}</p>
</div>Title:
<input ng-model="explain.title" placeholder="add title" />Text:
<input ng-model="explain.text" placeholder="enter text" />
<button class="btn btn-primary" ng-click="ctrl.append(explain)">Append</button>
<button class="btn btn-primary" ng-click="ctrl.delete(explain)">Delete</button>
</div>
</div>
</div>
</div>
</div>