Localising data by directives in AngularJS - angularjs

I want to localise data in my edit form with the help of the directives.
Input should be:
<input translate data-locale="en_EN" type="text" class="form-control" ng-model="item.defaultTranslation.name">
My item object is:
{
itemTranslations: [
{ name: "item name", locale: "en_EN"}
]
}
How can I write a directive to display the localised data?

Related

Angular dropdown doesn't load ng-model value

I am trying to load a dropdown with these values and I got the values correctly from the service but when I assign a value or load a dropdown with a value for ng-model, the dropdown doesn't show the correct option.
I print the "selected" value on the screen and show the correct information, but anyway, the dropdown selection is empty.
What is the suggestion for that?
Thanks in advance
Data: Class type
selected: number
Ex. Object:
works = [
{
$type: class,
Id: 1,
Name: "Test 1",
Description: "Test 1"
},
{
$type: class,
Id: 2,
Name: "test 2",
Description: "Test 2"
}
];
ng-options structure
<button type="button"
class="btn btn-default lg"
ng-model="selected"
name=""
bs-options="item.Id as item.Name for item in vm.works"
bs-select>
I checked also bs-options="item.Name for item in vm.works track by item.Id"

Angular Js how to get checkbox value on edit and submit?

<input type="checkbox" ng-model="mail.email" name="email"
ng-true-value="'mail.email'" ng-false-value="'0'">
This is my code while im going to edit i need to fetch the value from database but if i click the checkbox it shows the following response
{
regid: "NADr333434",
email: "mail.email",
altemail: "mail.altemail",
htmlcontent: "<b>kuhiuhioh oih oihih</b>"
}
I need the output as the follwing format how to get this
{
regid: "NADr333434",
email: "test#gmail.com",
altemail: "alternate#test.com",
htmlcontent: "<b>kuhiuhioh oih oihih</b>"
}

How to use user input information for new post to server (AngularJS)

How to modify so that we can use user input via empty fields on app rather than the current info...?
var dataObj = {
ID: "INFO226",
Name: "Application Development",
Overview: "An introduction to the use of software languages and tools for rapid application...",
Year: 2018,
Trimester: "1",
LectureTimes: "Thursday 12.40pm",
LecturerID: "1",
};
First of all, your question is not carrying the controller /html code snippet, so its really hard for me to understand what exactly you need here.
As per my assumption I am concluding your requirement and here is my answer to you..
Instead of var dataObj, use $scope.dataObj in controller.
In HTML,
<input type="text" ng-model="dataObj.ID" id="dataObjId"/>
<input type="text" ng-model="dataObj.Name" id="dataObjName"/>
<input type="text" ng-model="dataObj.Overview" id="dataObjOverview"/>
<input type="text" ng-model="dataObj.Year" id="dataObjYear"/>
and so on.
On submit of the form or on click of the Save button or so on your page, the dataObj scope is now modified with the user's input and can be submitted without pushing the data further.

AngularJS how to get and edit calculated input ng-model value related to other input value

I am trying to make some currency exchange system SPA based on AngularJS.
There should be several inputs that get currency data from json (with ng-repeat) and convert currency rate depending on active input value.
{
"currencies": [
{
"name":"EUR",
"rate": 1,
"active": "no"
},{
"name": "PLN",
"rate": 4.1028,
"active": "no"
}, {
"name": "USD",
"rate": 1.1239,
"active": "no"
}
]
}
<div ng-repeat='cur in main.currencies'>
<label>{{cur.name}}</label>
<input type="number" min="0"
ng-model="cur.result"
ng-init='cur.result = ""'
ng-click='main.clear();'
ng-focus='main.active = cur; cur.active = true';
ng-blur='cur.active = false';
>
</div>
How could I input 1 value on active (focused) input and get calculated values on other inputs. I am very new to AngularJS and want to learn it with practical exercises.
Other values should follow such logic: cur.value = main.active.value / main.active.rate * cur.rate.
But if I try instead of ng-model="cur.result":
ng-model="cur.result = main.active ? cur.result : cur.result/main.active.rate*cur.rate"
I can't write anything in input
Maybe I miss some ng*... in input properties, but as far I know if I use ng-model I should not use ng-name and ng-value...
try this JS:
angular.module('app',[]);
angular.module('app').controller('RateCtrl', RateCtrl);
function RateCtrl($scope){
var vm = $scope;
vm.cur = {};
vm.currencies = {/* your object */}
vm.setRate = function(model, rate){
return // your javascript
}
}
The HTML
<div ng-controller="RateCtrl as main">
<div ng-repeat="currency in main.currencies">
<label>{{currency.name}}</label>
<!-- Fyi, we are in an ng-repeat so there is an isolated scope. Sometimes '$parent.' must come before the objects outside ng-repeat -->
<input ng-model="main.cur.result" ng-focus="main.setRate(main.cur.result, currency.rate)">
</div>
</div>
This is one very basic way to manipulate the ng-model object. Alternatives include using Angular's filters, watchers, or decorators.

How to handle checkboxlist in AngularJS in Add and Edit operation?

I am new to AngularJS and facing one problem with multiple check-boxes. I have one registration form in which I have choices of colors which comes from database.
$scope.ColorList = { { ID: 1,Name:"Red" },{ ID: 2,Name:"Green" },{ ID: 3,Name:"Blue" }};
I am using below code to render checkbox in form.
<tr>
<td>Favorite Colors</td>
<td>
<label data-ng-repeat="c in item.ColorList">
<input type="checkbox" value="{{c.ID}}" /><span>{{c.Name}}</span>
</label>
</td>
</tr>
Now, during add operation, checkboxes renders properly... But how to bind checkboxes with model so that I get an array of selected checkboxes?
Also during edit time, I need to pre-select checkboxes to display user's saved choices.
So how to achieve it?
Thanks in advance.
I think most people would have used c as their model and then tied ng-model to some property on c. Then your list is really just item.ColorList
$scope.ColorList = [ { ID: 1,Name:"Red" },{ ID: 2,Name:"Green" },{ ID: 3,Name:"Blue" }];
<label data-ng-repeat="c in item.ColorList">
<input type="checkbox" ng-model="c.Active" value="{{c.ID}}" /><span>{{c.Name}}</span>
</label>
$scope.getSelected = function(item){
var results = [];
angular.forEach(item.ColorList, function(c){
if(c.Active){
results.push(c);
}
});
return results;
}

Resources