Is my firts time working with ionic and angular. I have a checkbox list populate from controller, when I click on check the view show my change but if I want view this change on controller show me the old value. I need add/substract the values
html
<div class="item-text-wrap">
<ion-list>
<ion-checkbox ng-repeat="item in listTypeProduct"
ng-model="item.checked"
ng-checked="item.checked"
ng-change="add(listTypeProduct)" >{{ item.text }}
</ion-checkbox>
</ion-list>
</div>
<div class="item">
<pre ng-bind="listTypeProduct | json"></pre>
</div>
the print on page is working!
This is my controller
app.controller('CotCtrl', function($scope, $ionicSideMenuDelegate,$rootScope) {
$scope.listTypeProduct = [
{ text: "a1", checked: false , value:4500 },
{ text: "a2", checked: false , value:2000 },
{ text: "a3", checked: false , value:1200 }
];
$scope.add = function(list){
console.log(JSON.stringify(list));
};
But on my controller when I iterate the array give me the old information.
Method "add" I want iterate the list with update values for example
angular.forEach(list, function(val, key) {
if( checked && (value) )
$scope.total += total+val.value;
});
To add all checked values.
Quoting AngularJS documentation here
Note that this directive "ngChecked" should not be used together with ngModel, as this can lead to unexpected behaviour.
This said, use only ng-model to bind your checkbox to the model in the controller.
Related
I have an array and I want to take specific element from it using directive (for example array[0]), but I don't understand how to achieve it. I realize that this is the basics of angularjs but I can't find anywhere a solution. Please help :)
Here's the array
$scope.array = [
{
text: '1',
},
{
text: '2',
},
{
text: '3',
}]
And I use that construction in a view
<div ng-repeat="element in array">
<content></content>
</div>
And this is what contains that directive
<p>{{array.text}}</p>
In html :
In content directive you will have to add
bindToController: {data: "="}
You could set the same var in your directive instead of data
<div ng-repeat="element in array">
<content></content>
</div>
directive:
<p>{{element.text}}</p>
If the directive is about customer data you should use {{ customer.text }}, if that is the case you can continue using the same scope like this ...
<div ng-repeat="customer in array">
<content></content>
</div>
directive:
<p>{{customer.text}}</p>
What if we have this scenario ....
A dropdown with 3 elements. Upon selecting an item and clicking the save button, the ng-model from the dropdown menu is binded with an html tag so that the ng-model now has a glyphicon icon appended before the item name.
I have tried a basic implementation, however I was not able to complete it.
The Model
var app = angular.module('myApp', ['ngSanitize'])
app.controller('myController', function($scope){
$scope.name = 'Dylan'
$scope.saved = false
$scope.data = [{
'name' : 'Item 1',
'color': 'red'
},
{
'name' : 'Item 2',
'color': 'blue'
},
{
'name' : 'Item 3',
'color': 'green'
}]
$scope.saveItem = function(item) {
// var index = $scope.data.indexOf(item);
// $scope.data[index].name = "✓" + item.name
// console.log(index)
$scope.binder = " ✓ " + item.name;
}
})
The View
<body ng-app="myApp">
<div ng-controller="myController">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> {{name}}
<div class="row">
<div class="col-sm-2" >
<select class="form-control selectPicker glyphicon"
ng-model="selectedItem"
ng-options = "item as item.name for item in data">
</select>
</div>
</div>
<br>
<button type="button"
class="btn btn-danger"
ng-disabled="!selectedItem"
ng-click="saveItem(selectedItem)">
Save
</button>
<div ng-bind-html="binder"></div>
</body>
Preview of result
What I want is this ....
The current ng-model 'Item 1' is to be replaced/updated exactly like the binder (With the tick included).
Furthermore, I tried to do the same thing using ng-repeat, however this is not an option for me as I need to use the object properties throughout the whole application. With ng-repeat, from my understanding, it seems that the selected value is a string rather than an object.
Thanks in advance for any help or suggestions :)
A) If you mean you want to add the Glyphicon to the select then this isn't simple and I can point you here
B) If you want to add the simple UTF-8 symbol then this is shown below.
The most efficient thing to do would be to add a new value to your data object to hold the icon/symbol you require so you can use this as and when required.
So in your save item function you are saving the icon/symbol value away from your name.
$scope.saveItem = function(item) {
var index = $scope.data.indexOf(item);
$scope.data[index].symbol= "✓";
};
Then you can display your output however you wish such as shown below.
<div ng-bind-html="selectedItem.symbol + ' ' + selectedItem.name"></div>
Your data afterwards will look like.
$scope.data = [{
'name' : 'Item 1',
'color': 'red',
'symbol': '✓'
}];
To render the symbol in your select options you will need to use a custom filter as shown below.
app.filter('renderSymbol', function(){
return function(val){
var symbol = document.createElement('div');
symbol.innerHTML = val;
return symbol.childNodes[0].nodeValue;
};
});
The filter will take the value of each option and put them in a div which will render the symbol for you.
The filter is used in your ng-options as shown:
ng-options="item as (item.symbol + ' ' + item.name | renderSymbol) for item in data"
Output:
Here is a working example: Plunker
I have the following code. The following code displays 5 tag item.
What I wanted to do is when user click on any of the tag item, it will be hidden or blank-out. But when I clicked on any of it, all the tag item got blanked out instead of the item I selected. Can anyone give me some idea ?
<div data-ng-repeat="x in mylist">
<a class="button" ng-click="hideme();" style="{{visibility}}">{{x}}</a>
</div>
.controller('MyCtrl', function($scope, $stateParams, chats) {
$scope.hideme = function(index, value) {
$scope.visibility = "background-color: #000000 !important;";
}
});
Firstly, you might want to change your object structure a bit. Remeber always have a dot (.) in your model value.
Try this.
<div ng-app ng-controller="myCtrl">
<div ng-repeat="x in myList">
{{x.value}}
</div>
</div>
function myCtrl($scope){
$scope.myList = [{
value: "a"
}, {
value: "b"
}, {
value: "c"
}];
$scope.hide = function(obj){
obj.hide = true;
}
}
JSFiddle
User sees a list of options (eg: 1.Apple ; 2.Banana ; 3.Mango). There is a textbox where user types in the desired option and clicks send to proceed further.
Existing Setup:
HTML:
<p ng-repeat="opt in objHistory.OptionItems track by $index">
{{ opt.SortOrder }}. {{ opt.OptionName }}
</p>
<textarea ng-model="userInput"></textarea>
Send
JS:
$scope.GetNextItem = function () {
alert($scope.userInput);
//some code
}
The above code is working good. But now I have changed the options to anchor tags, so user can click on them, instead of typing and the same flow follows.
New HTML:
<p ng-repeat="opt in objHistory.OptionItems track by $index">
<a href="javascript:;"
ng-model = "userInput"
ng-init="userInput=opt.SortOrder"
ng-click="GetNextItem()">{{ opt.SortOrder }}. {{ opt.OptionName }}
</a>
</p>
I get undefined in the alert now. Where am I going wrong? Can the same ng-model variable name be used multiple times (I'm using it for the textbox and also the anchor tags)?
ng-model cannot be used on anchor tags unless you have an input field or a custom directive. According to docs:
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
Why are you using ngModel on anchor tags?
Sorry not enough rep to comment
You are trying to read the set value before Angular is done assigning.
HTML:
<p ng-repeat="opt in objHistory.OptionItems track by $index">
<a href="javascript:;"
ng-model = "userInput"
ng-init="init(opt)"
ng-click="GetNextItem()">{{ opt.SortOrder }}. {{ opt.OptionName }}
</a>
</p>
<textarea ng-model="userInput"></textarea>
Controller:
angular.module("app",[]).controller("MainController", function($scope) {
$scope.GetNextItem = function () {
alert($scope.userInput);
//some code
};
$scope.init = function(opt) {
$scope.userInput = opt.SortOrder; // set it in the init method
};
$scope.objHistory = {
OptionItems: [{
SortOrder : "1",
OptionName: "Hi"
}, {
SortOrder : "2",
OptionName: "Hi"
}]
}
});
Working DEMO
Update based on comment:
$scope.GetNextItem = function (opt) {
$scope.userInput = opt.SortOrder;
//some code
};
Now in your HTML:
<p ng-repeat="opt in objHistory.OptionItems track by $index">
<a href="javascript:;"
ng-click="GetNextItem(opt)">{{ opt.SortOrder }}. {{ opt.OptionName }}
</a>
</p>
Move ng-model to the parent <p>
I need to call a js function when an ng-repeat template is created:
<div ng-repeat="item in items">
<input id="ip{{item.id}}">
<script>$(function () { $('#ip{{item.id}}').kendoDatePicker(); });</script>
</div>
The id is replaced as expected, but angular doesn't seem to work inside script tags.
That is correct, Angular will not evaluate expressions in script tags. You will need to use a directive that will initialize the Kendo plugin for each element.
The good news is Kendo already has a module for integrating with Angular, so you might as well just use that. Here is a plunk I put together showing it in a repeater.
<div ng-repeat="item in items">
<label for="{{item.id}}">{{item.id}}</label>
<div>
<input kendo-date-picker ng-model="item.value" />
</div>
</div>
Controller:
angular.module("demo", ['kendo.directives'])
.controller('DemoCtrl', ['$scope',
function($scope) {
$scope.items = [{
id: 'item1',
value: null
}, {
id: 'item2',
value: null
}, {
id: 'item3',
value: null
}, {
id: 'item4',
value: null
}];
}
]);