I am using uib-timpicker for dates as input from user the problem is i want to add key to my data on runtime if something changes on the div e.g i want to add variable etiming.clockOut.edited to my data here is the code:
<div style="float:left" uib-timepicker key-handler="" data-ng-model="etiming.clockOut.time" ></div>
if you want to add dynamic key on change then simply use:
ng-change="etiming.clockOut.edited=true"
<divuib-timepicker key-handler="" ng-change="etiming.clockOut.edited=true" data-ng-model="etiming.clockOut.time" ></div>
or
create a function and on ng-change call the created function and assign anything you want in the function in your case :
<div uib-timepicker key-handler="" ng-change="callFunction(etiming.clockOut)" data-ng-model="etiming.clockOut.time" ></div>
and in js file
$scope.callFunction = function(data) {
data.edited =true //or false as you wish
}
Related
I have a method to save an object. That object is added to an array after its saved. The object has many properties . So, before adding the object to an array I am modifying few properties. Few of them don't reflect in UI .
Code :
HomeController.js
$scope.MainArray=[];
$scope.newItem={};
AdjustmentController.js
$scope.Save = function(item){
$scope.newItem={};
var promiseObj= $http.post('My_Url',{expectedItem: item});
promiseObj.success(function(data,status){
$scope.newItem.Id= data;
$scope.newItem.dataList= item.dataList;
$scope.newItem.LatestComment = item.LatestComment;
$scope.newItem.CreatedDate = item.CreatedDate;
if($scope.MainArray.length==0){
$scope.MainArray.push($scope.newItem);
}
else{
$scope.MainArray.unshift($scope.newItem);
}
})
}
HTML :
<body ng-controller="HomeController">
<div ng-controller="AdjustmentController">
<div ng-repeat="item in MainArray ">
<!-- This past is not updated -->
<span>{{item.LatestComment}}</span>
<span>{{item.CreatedDate}}</span>
<!-- This past is updated -->
<span>{{item.DataList[0].text}}</span>
<span>{{item.DataList[1].text}}</span>
<span>{{item.DataList[2].text}}</span>
<span>{{item.DataList[3].text}}</span>
</div>
</div>
</body>
The value is changes if I console and see. But in UI it updated only few values and LatestComment and CreatedDate is not updated.
I have also tried using $scope.$apply() , but it did not work.
You need to initialize variable $scope.MainArray when controller loads, then after you need to just over write it when it will needed to save.
In your controller define variable like this :
$scope.MainArray=[];
and then use it in your save object function.
Here, you only send the item to your backend:
var promiseObj= $http.post('My_Url',{expectedItem: item});
and here you expecting it to be changed:
$scope.newItem.dataList= item.dataList
$scope.newItem.LatestComment = item.LatestComment;
$scope.newItem.CreatedDate = item.CreatedDate;
Your answer is contained in the data object, not the item. item won't ever change this way.
I want to hide this div:
<div class="desc" ng-show="desc">
and show this div
<div class="lists"ng-show="lists"
ng-repeat="x in todoWork | orderBy:['todoPriority', 'todoTime']"
ng-class="{strike:x.done}">
on ng-blur directive.
I tried this but,
$scope.myFunc1 = function() {
if($scope.myForm1.description.$dirty && $scope.myForm1.datetime.$dirty && $scope.myForm1.priority.$dirty==true){
$scope.lists =true;
$scope.desc=false;
}
};
but only first one is executing.Even if try to write another function for second one the problem remains.
if you want to hide first one and show second one then why are not you using a single variable like the below:
First one <div ng-show="desc">
Second one <div ng-show="!desc">
I have a JSON which provides me a user's working experiences info. But country and city's are provided in a code format (TR,DE etc.)
I am using ng-repeat to pass them into html like this
<div ng-repeat="e in experiences">
<span>{{e.Name}}</span>
<span ng-init="changeCodeToFullName(e.Country)">{{vm.CountryFullName[$index]}}</span>
</div>
I am using ng-init to convert Country Code to full name. changeCodeToFullName is an angular service written by me, Is this a correct method? If it is, I can't access the dom to change CountryFullName value. I tried to access them in JS file like vm.CountryFullName[0]="TEST" but it didn't worked. I need to use e.Country variable after, therefore I can't change the original .e.Country value.
How can I access a variable inside of ng-repeat after ng-repeat completed?
How about using a custom filter:
<div ng-repeat="e in experiences">
<span>{{e.Name}}</span>
<span>{{e.Country | changeCodeToFullName}}</span>
</div>
angular.module('App').filter('changeCodeToFullName', function(YourService) {
return function(country) {
return YourService.getFullCountryName(country)
}
})
Here's an example: http://codepen.io/rustydev/pen/YWyqJB
This is one way of doing it - but this ngInit value won't be reparsed if the list updates. Why not just format the data in the JSON request response - such as:
$http.get("json.json").success(function(data) {
$scope.exeriences = data.map(function(obj) {
//Format results;
if (obj.Country == "DE") {
obj.Country = "Germany"; //etc
}
return obj;
});
});
All:
I wonder how can I set a OR operator on a HTML string in Angualar Template, something like:
<div>{{value || <h6>No Header for now.</h6>}}</div>
The logic is if value is a string but not undefined, we show the value text, otherwise we show a error "No Header for Now" wrapped up by <h6>.
I do not know why this expression can not be correctly interpreted?
Thanks
This can be solved with ng-if:
<div ng-if="value">value</div>
<div ng-if="!value"><h6>No Header for now.</h6></div>
You can add specific attributes (e.g. class) and/or directives (e.g. ng-click) on each <div>.
The problem with using a single element is that you have to repeat your condition several times:
<div ng-class="{ value: 'class1', !value: 'class2' }"
ng-click="value ? action1() : action2()"
ng-bind-html="value || html">
</div>
You have to put a string, not an expression: <h6>No Header for now.</h6> is an invalid js expression. '<h6>No Header for now.</h6>' is a string and can be displayed in the {{ }}.
<div>{{value || '<h6>No Header for now.</h6>' }}</div>
or
<div>{{value != null ? value : '<h6>No Header for now.</h6>' }}</div>
I'm convinced the 2nd works.
EDIT:
If you want to add html code in the {{ }}, it is another problem. See AngularJS : Insert HTML into view, the filter 'sanitize' in 2nd answer should help you ( call {{ '<h1>test</h1>' | sanitize }} and it should work.
EDIT 2:
In a js file:
angular.module('yourapp')
.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
In view:
<div>{{value || '<h6>No Header for now.</h6>' | sanitize }}</div>
In dont know if you need 'ngResource' to use $sce, if it doesn't work, you will have to install angular-resource :/
I have an ng-repeat. And I would like to change the class of just that element vs the entire group.
<button ng-class="defaultClass" ng-repeat="tube in node.Tubes" ng-click="toggleBtn(tube)">{{"Tube " + ($index + 1)}}</button>
with the above HTML on my ng-click I can pass the tube, which really only gives me the data passed from the API, if I console.log(this) I see the class name in an element called $$watchers but that seems odd to change it from there.
$scope.toggleBtn = function (element) {
console.log(element);
console.log(this);
}
In my controller I have $scope.defaultClass = "btn btn-off"; but if I change that with the function it changes every element.
How can I only change the class of the element clicked?
Continuing from the comments. Than you can't use $scope variable for that, because, as you said, it will be the same. TO solve this you need to use ng-class properly.
Docs: https://docs.angularjs.org/api/ng/directive/ngClass (see an example at the bottom of the page)
<button ng-class="{'btn-on' : tube.toggled, 'btn-off' : !tube.toggled}" ng-repeat="tube in node.Tubes" ng-click="toggleBtn(tube)">{{"Tube " + ($index + 1)}}</button>
http://plnkr.co/edit/WKLJ45yRYu1583C2ZnfT?p=preview
I'm not sure I understand if that's what you want, but you can use:
<button class="btn" ng-repeat="tube in node.Tubes" ng-class="{'btn-off':!toggled, 'btn-on':toggled}" ng-click="toggled = !toggled">{{"Tube " + ($index + 1)}}</button>
no need to add any code to the controller in this case.
These other answers are excellent. However, I would like to point out another method for this. Let's say you were looping through an array of receipts. For example, in the controller you had receipts in scope:
$scope.receipts = [ ... ];
And on the front-end you were looping through these receipts:
<div ng-repeat="receipt in receipts">{{ receipt.[attribute] }}</div>
One way to keep track of unique classes is to add a "class" key to the receipt objects. For example a receipt would look like:
receipt { 'id': '1', 'class' : ' ... ' }
On the front-end, you would determine the class using ng-class:
<div ng-repeat="receipt in receipts">
<div ng-class="receipt.class"></div>
</div>
And then, you could pass the receipt and its ID to a toggleButton() method like so:
<div ng-repeat="receipt in receipts">
<div class="btn" ng-click="toggleClass(receipt.id)"></div>
<div ng-class="receipt.class"></div>
</div>
And then within the controller you could simply update the class for that particular receipt (assuming here there is a method getReceipt() that gets a receipt from the array $scope.receipts):
$scope.toggleClass = function(id) {
getReceipt(id).class = { ... }
}
This would dynamically change the class for that single receipt based on the logic within the toggleClass() function.