Develop Reference

angular js select box item missing after refresh

I trying to set drop-down box display the default item. First, item in drop-down box able to display correctly and I can select the item in order to save into database. Everything working fine, the problem is after I refresh the page, the default item always is empty, it should display the item that I save.
HTML
<select class="form-control" ng-model="sst_type" ng-options="type for type in
sst_types" ng-change="changeSstType(sst_type)"></select>
JS
.controller('sstCtrl', function ($scope, $rootScope, Module, settings,
toastr, actionBar, $uibModal) {
// scope properties
$scope.loading = true;
$scope.sst_types = ['Sotong', 'Bento'];
$scope.sst_all = [];
// scope functions
$scope.getSst = function () {
Module.getSst().then(function (res) {
$scope.loading = false;
if (res.sst_all) {
angular.forEach(res.sst_all, function (v) {
$scope.sst_all.push({
id: v.id,
name: v.name,
value: v.value,
percentage: (v.value * 100).toString(),
type: v.value == 0 ? 'Sotong' : 'Bento'
});
});
}
});
};

You need to return the id of the saved item from server. You can do that in the Module.getSst() call.
In foreach set $scope.sst_type to the matching one.
Good luck

Using array .map and $scope.__.reduce() for advanced angularjs filters

i'm currently building some advanced filters to use in a search input. I'm trying to search through multiple JSON objects at once. I've been able to use the functions .map and .reduce to create these filters. For more information look at this question that gave me this solution to work with. So for the orders page i've been able to add the customer firstname through this function. Take a look at the code below:
$http.get('config/get/getOrders.php', {cache: true}).then(function(response){
$scope.orders = response.data.orders.order;
$scope.orders.map( function addPlace(item) {
item.firstname = $scope.customers.reduce(function(a,customers){
return item.id_customer === customers.id ? customers.firstname : a;
}, '');
return item;
});
});
by using $scope.orders.map() and $scope.customers.reduce() i'm able to add a value to the orders array. By doing this i'm able to extend my search filter with the customer_name.
The problem i'm having now is actually two different things. The first thing is that i'm trying to create a more advanced comparison before obtaining one item. (The Combination_product_code) Take a look at the code below:
$http.get('config/get/getProducts.php', {cache: true}).then(function(response){
$scope.products = response.data.products.product;
$scope.products.map( function addPlace(item) {
item.eanCombination = $scope.productCombinations.reduce(function(a, productCombinations, stock_availables){
return item.id === stock_availables.id + stock_availables.id === stock_availables.id_product_attribute + stock_availables.id_product_attribute === productCombinations.id ? productCombinations.ean13: a;
}, '');
return item;
});
});
So as you can see i need to check through multiple values before i'm able to obtain the ean13 sadly this isn't working and i'm wondering if i'm setting the comparison right? i've checked all the value names multiple times and they are correct.
The second issue is adding multiple new items. I've been trying to add a product_name but also the products reference code. Take a look at the code below:
$http.get('config/get/getStock.php', {cache: true}).then(function (response) {
$scope.stock_availables = response.data.stock_availables.stock_available;
$scope.stock_availables.map( function addPlace(item) {
item.product_name = $scope.products.reduce(function(a,products){
return item.id_product === products.id ? products.name.language : a;
},
item.product_reference = $scope.products.reduce(function(b,products) {
return item.id_product === products.id ? products.reference: b;
}));
return item;
});
});
So my issues are adding multiple comparison queries before obtaining and adding the item and adding multiple items.
Update:
I've solved my issue about the "adding multiple items." The mistake i've made was in closing the function correctly. A working example:
$http.get('config/get/getStock.php', {cache: true}).then(function (response) {
$scope.stock_availables = response.data.stock_availables.stock_available;
$scope.stock_availables.map( function addPlace(item) {
item.product_name = $scope.products.reduce(function(a,products){
return item.id_product === products.id ? products.name.language : a;
}),
item.product_reference = $scope.products.reduce(function(b,products) {
return item.id_product === products.id ? products.reference: b;
});
return item;
});
});
This means that i'm looking for a solution about using multiple comparison queries before obtaining the data.
The workflow for this data is:
i'm using ng-repeat="product in products" within the products data i'm creating a filter that corresponds to the following data:
Products table:
id,
Name,
price,
etc,
stock table:
id,
product_id,
quantity,
product_attribute_id,
Combinations table:
id -> "Corresponds with attribute_id from stock table",
combinationEAN -> "The value i'm trying to reach",
So the workflow is:
Stock table -> id_product from products table -> combination id -> attribute_id from stock table.
I'm able to filter this within my view by using:
<h5 ng-if="combination.id >= 1 && product.id == stock_available.id_product && stock_available.id_product_attribute == combination.id" ng-repeat="combination in productCombinations" ng-bind="combination.ean13"></h5>
What i would like to to do is add that combination.ean13 directly to the products $scope by using the example above. So that i'm able to use a search input to search for that value and only show those products. See the example below:
<input type="text" class="bc-f3f3f3 form-control no-border" ng-model="productSearch" ng-change="filterProduct(productSearch)" placeholder="{{ 'Zoek of scan producten' | translate }}">
<div ng-infinte-scroll="loadMore()" infinite-scroll-disabled='products.busy' infinite-scroll-distance='1' class="align-center tcolor-2a95cf text-center padding-t-25 padding-s-45 no-margin row">
<div class="productimg col-4" ng-repeat="product in products | orderBy: '-date_add' | filter: filterProduct(productSearch) | filter: {id_category_default: productCategory}">
<div class="out-of-stock" ng-if="product.id == stock_available.id_product && stock_available.quantity == 0 && stock_available.id_product_attribute == 0" ng-repeat="stock_available in stock_availables">
<div class="stock-circle"></div>
</div>
<div>
<img ng-value="{{reference}}" data-toggle="modal" data-target=".bd-example-modal-sm{{product.id}}" ng-value="{{ean13}}" alt="{{product.name.language}}" ng-src="{{settings.url}}/{{product.id_default_image}}-home_default/{{product.link_rewrite.language}}.jpg" err-src="{{settings.url}}//img/p/nl-default-home_default.jpg" class="img-responsive product-img"/>
<p ng-bind="product.name.language"></p>
<p ng-bind="product.eanCombination"></p>
</div>
</div>
</div>
// Controller:
$http.get('config/get/getProducts.php', {cache: true}).then(function(response){
$scope.products = response.data.products.product;
$scope.products.map( function addPlace(item) {
item.eanCombination = $scope.productCombinations.reduce(function(a, productCombinations, stock_availables){
return item.id === stock_availables.id_product + stock_availables.id_product === stock_availables.id_product_attribute + stock_availables.id_product_attribute === productCombinations.id ? productCombinations.ean13: a;
}, '');
return item;
});
});
$scope.filterProduct = function(productSearch) {
return (name.language = productSearch) || (ean13 = productSearch) || (reference = productSearch) || (eanCombination = productSearch);
};
If you have any questions please ask them in the comments below.
As always, thanks in advance!

Dynamically style based on angular value passed through

I have an input value that I want to style, based on the value I receive back from the angular variable. So in my cshtml, I have:
<input type="{{d.input_type}}" ng-style={{d.input_type}} == "radio" ? 'width:40px;' : 'width:100px;" #*class="form-control"*# #*ng-model="Customer.CustStatus"*# name="question_answer" id="question_answer" required >
Then in my angular .js file I have the following:
$scope.Question = {
Question1: '',
input_type: ''
}
$http.get('/Home/getUserInfo')
.then(function (response) {
$scope.Question = response.data;
console.log("status:" + response.status);
console.log("data: " + $scope.Question);
}).catch(function (response) {
console.error('Error occurred:', response.status, response.data);
}).finally(function () {
console.log("Task Finished.");
});
Based on the value I receive back (which is either "radio" or "text"), I want to have different styling. For example, I want to have a radio button height of 20px and text must be 40px. How would I go about having conditional styling on my input value, based on the text value I receive back from "input_type".
Any help would be greatly appreciated.

The syntax is
<input ... ng-style="{'width': d.input_type == 'radio' ? '40px' : '100px'}" ...>
So you first specify the property you're going to set and then its value based on your logic.

Angular Bootstrap Typeahead dropdown

I have an Angular ui-boostrap typeahead component that is working correctly until I added one requirement to the whole function. I want to call the backend for the suggested results just after user types in 3 letters. It is done correctly but my problem is that the results are visible only when users type in the 4th letter. Is there any way to bypass this, by forcing it to refresh the UI just after user types in the 3rd letter.
Code is :
HTLM
<input name="states" id="states" type="text" ng-model="vm.cityName"
uib-typeahead="municipality as municipality.city + ' (' + municipality.name + ') '+municipality.zipCode for municipality in vm.getMunicipalitiesByCity($viewValue) | filter:$viewValue | limitTo:8" class="form-control" typeahead-on-select="vm.citySelected()" >
JS Controller
vm.getMunicipalitiesByCity = function (cityName) {
if (cityName != undefined && cityName.length == 3) {
CalculationEndpointService.municipalitiesByCity({cityName: cityName}, function (result) {
vm.municipalities = result.map(
function (item) {
return item;
}
);
});
}
if(cityName.length<3){
vm.municipalities=[""];
}
return vm.municipalities;
};

you could use typeahead-min-length attribute. see https://angular-ui.github.io/bootstrap/#/typeahead

AngularUI-Bootstrap Typeahead: Grouping results

I am implementing typeahead using AngularUI-Bootstrap. I need to show the results grouped based on some values coming from the database. Here's a sample scenario
There are some users in the database, each user has a "Department". One user name can be available in multiple departments.
The end-user types in the names to search users from the database and retrieves the list in the typeahead list. Since one user name can belong to multiple departments, the requirement is to show the user names grouped by different departments. Something like this:
Then the user can select the desired user name and proceed.
As per the Typeahead documentation present here, I don't see any option to cater to my requirement.
I have tried the this workaround: Whenever the typeahead array is getting formed, I appended the user department to the array element:
$scope.fetchUsers = function(val) {
console.log("Entered fetchUsers function");
return $http.get("http://localhost:8080/TestWeb/users", {
params : {
username : val
}
}).then(function(res) {
console.log("Response:",res);
var users = [];
angular.forEach(res.data, function(item) {
users.push(item.UserName + " - " + item.UserDepartment);
});
console.log("users=",users);
return users;
});
};
This way, at least the end user sees the department. But when I select the record, the selected value is the full content of the array element. Below is sample screenshot to elaborate:
HTML
Users from local service
<pre>Model: {{userList | json}}</pre>
<input type="text" ng-model="userList" placeholder="Users loaded from local database"
typeahead="username for username in fetchUsers($viewValue)"
typeahead-loading="loadingUsers" class="form-control">
<i ng-show="loadingUsers" class="glyphicon glyphicon-refresh"></i>
User types in the string
User selects one record
I want to avoid the department (in this case, string - Desc 4 ) when user selects a record.
Is there any way I can achieve this grouping without any workaround? Or is there any way I can enhance my workaround?

I used to have a similar requirement and here is how I did it that time.
Example Plunker: http://plnkr.co/edit/zujdouvB4bz7tFX8HaNu?p=preview
The trick is to set the typeahead-template-url to a custom item template:
<input type="text" class="form-control" placeholder="Users loaded from local database"
ng-model="selectedUser"
typeahead="user as user.name for user in getUsers($viewValue)"
typeahead-template-url="typeahead-item.html" />
The item template, this represent each item in a dropdown:
<div class="typeahead-group-header" ng-if="match.model.firstInGroup">Desc {{match.model.group}}</div>
<a>
<span ng-bind-html="match.label | typeaheadHighlight:query"></span>
</a>
As you can see, there is an ng-if to show a group header if that item has a property firstInGroup set to true.
The firstInGroup properties are populated like this using lodashjs:
$scope.getUsers = function (search) {
var filtered = filterFilter(users, search);
var results = _(filtered)
.groupBy('group')
.map(function (g) {
g[0].firstInGroup = true; // the first item in each group
return g;
})
.flatten()
.value();
return results;
}
Hope this fit to your requirement too.

please see here http://plnkr.co/edit/DmoEWzAUHGEXuHILLPBp?p=preview
instead of creating new objects here:
angular.forEach(res.data, function(item) {
users.push(item.UserName + " - " + item.UserDepartment);
});
use create template :
<script type="text/ng-template" id="customTemplate.html">
<a> {{ match.model.name}} - department : {{match.model.dept}}</a>
</script>
and use it in your Typeahead directive
<input type="text" ng-model="selected"
typeahead="user.name as user for user in users | filter:$viewValue | limitTo:8" class="form-control"
typeahead-template-url="customTemplate.html">