We Keep Coding

two <class=form-control"> with ng-repeat

I do have a propblem with my angularjs Code.
I have an object which I want to split into two Groups.
The two objects looks something like
{
"_embedded": {
"aspects": [
{
"name": "KPIs",
"holderAssetId": "123",
"aspectTypeId": "KPIs",
"aspectTypeName": "KPIs",
"category": "dynamic",
"description": "description an. ",
"variables": [
{
"name": "Availability_Minutes",
"dataType": "DOUBLE",
"unit": "min",
"searchable": false,
"length": null,
"qualityCode": true,
"defaultValue": null
},
and 2nd one:
"_embedded": {
"assets": [
{
"assetId": "123",
"tenantId": "aaa",
"name": "GA700",
"etag": 1,
"externalId": "",
Now I want to have two Form-Control. In the first one I can choose aspects.name which will be filtered via ng-repeat out of the object. This works right now.
But The variable x in my ng-repeat is not transferred to my second form-control. Have a look at the code below.
What am I doing wrong?
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="form-group">
<label for="choose_asset_form">Asset</label>
<select class="form-control" id="choose_asset_form" ng-model="selected_assetId">
<option ng-repeat="x in ctrl.assets" ng-value="x.assetId">
{{x.name}}
</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="form-group">
<label for="choose_aspect_form">Aspect for {{x.assetId}}</label>
<select class="form-control" id="choose_aspect_form" ng-model="selected_aspect">
<option ng-repeat="x in ctrl.asset.aspects" ng-value="x.name">
{{x.name}}
</option>
</select>
</div>
</div>
</div>
So I can see assets.name in the first Control, but I can not see aspects.name in the second form-control.

How to filter array with arraylist using ng-repeat

I'm trying to filter an array with a simple array list but I can't seem to figure out how, I tried using a custom filter but I can't make it work.
Edit: I've added more code. Text box Search works fine but when I add the myFilterby on the ng-repeat it no longer filters. I simply want to filter out an array list.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search .." ng-model="searchText">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<td ng-repeat="a in product| filter:searchText | filter:myFilterBy">
<img class="avatar" src="img/{{a.image}}" alt="">
<div class="middleT">
<p>{{a.brand}} {{a.model}} </p>
<p>${{a.price}} </p>
</div>
Angular:
var HandleModule = angular.module("HandleModule",['rzModule','ui.bootstrap','angular.filter']);
HandleModule.controller('HandleCtrl',function($scope,$http){
// get data from the server in JSON format
$scope.chk0 = ['apple', 'orange', 'banana'];
$http.get('./loader.php').then(successCallback, errorCallback);
function successCallback(response){
//success code
$scope.product = response.data;
}
function errorCallback(error){
//error code
$scope.product="error";
}
$scope.myFilterBy = function(e) {
return $scope.chk0.indexOf(e) !== -1;
}
PHP:
<?php
$con = mysqli_connect("localhost","root","","product");
$query = "SELECT id, model, brand, price, description, image, FROM fruits ORDER BY id";
$result = mysqli_query($con, $query);
$fruits= array();
while($row = mysqli_fetch_assoc($result))
{
$fruits[] = $row;
}
echo json_encode($fruits);
?>
Used NG-repeat to print out the data separately. I used ng-repeat to display on html
<p ng-repeat="a in products ">
{{a}}
{"id":"1","model":"test1","brand":"orange","price":"4",
"description":"orange sweet and sour","image":"orange.jpg"}
{"id":"2","model":"test2","brand":"banana","price":"3",
"description":"yellow sweet","image":"banana.jpg"}
{"id":"3","model":"test3","brand":"apple","price":"5",
"description":" red sweet crunchy","image":"apple.jpg"}

From what I can decipher from your question and subsequent comments, you are simply trying to filter your product array by search text that is input by the user and a static array.
Your issue is that you are trying to compare an object to an array of strings. To fix your problem you should compare an object property, in this case brand, against the array of strings.
You can see it working below. For simplicity I have removed any code that wasn't essential to this issue.
var HandleModule = angular.module("HandleModule", []);
HandleModule.controller('HandleCtrl', function($scope) {
$scope.chk0 = ['apple', 'orange', 'banana'];
$scope.product = [{
"id": "1",
"model": "test1",
"brand": "orange",
"price": "4",
"description": "orange sweet and sour",
"image": "orange.jpg"
}, {
"id": "2",
"model": "test2",
"brand": "banana",
"price": "3",
"description": "yellow sweet",
"image": "banana.jpg"
}, {
"id": "3",
"model": "test3",
"brand": "apple",
"price": "5",
"description": "red sweet crunchy",
"image": "apple.jpg"
}, {
"id": "4",
"model": "test4",
"brand": "pear",
"price": "6",
"description": "red sweet crunchy",
"image": "pear.jpg"
}];
$scope.myFilterBy = function(e) {
return $scope.chk0.indexOf(e.brand) >= 0;
};
});
<html ng-app="HandleModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="HandleCtrl">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search .." ng-model="searchText" />
</div>
<table>
<tbody>
<tr>
<td ng-repeat="a in product| filter:searchText | filter:myFilterBy">
<div>
<p>{{a.brand}} {{a.model}} </p>
<p>${{a.price}} </p>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

How to compute Knockout foreach with if name is equals to $root.selected

I have a radio button initially in the page which is saving selected item details with value as name.
<div data-bind="foreach: {data:customer ,as:'customerData'}, visible: customer().length > 0">
<label class="btn btn-primary active">
<input type="radio" name="optionsGroup" data-bind="attr: {value:name}, checked: $root.selected">
<span data-bind="text: customer.type"></span>
</label>
</div>
Then in the later page I want to show customer details of the selected item.
I am trying to do like below but I am not getting the desired results and all the objects in customer gets printed instead of selected one.
<div data-bind="foreach: {data:customer,as:'customerData'}, visible: customer().length > 0">
<div data-bind:"if:$root.selected() === customer.name">
<p data-bind="text:customer.name" class="w3-center"></p>
<p data-bind="text:customer.college" class="w3-center"></p>
<p data-bind="text:customer.school" class="w3-center"></p>
</div>
I tried to make a foreach with if condition but that does'nt solve the problem as i stated earlier in the post also the json file looks like this:
"customer": [{
"order": "01",
"name": "custom 1",
"type": "A1",
"school": "ABCDS",
"College": "university of florida"
},
{
"order": "02",
"name": "custom 2",
"type": "A2",
"school": "ABCDS",
"College": "university of new york"
}
]

Angular Js orderBy with numeric field is not working

In controller I have written code that convert rank into Float
details.rank = '';
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
if (predicate == 'rank') {
for (var i = 0; i < data.countries[$scope.index].cities.length; i++) {
details.rank = parseFloat(data.countries[$scope.index].cities[i].rank);
}
$scope.predicate = predicate;
} else $scope.predicate = predicate;
};
but here I am getting error that ReferenceError: details is not defined
I have json like this:
{
"countries": [{
"country": "India",
"cities": [{
"name": "Bangalore",
"rank": "40"
}, {
"name": "Kolkata",
"rank": "54"
}, {
"name": "Mumbai",
"rank": "32"
}, {
"name": "Chennai",
"rank": "42"
}]
}, {
"country": "China",
"cities": [{
"name": "Guangzhou",
"rank": "111"
}, {
"name": "Beijing",
"rank": "90"
}, {
"name": "Fuzhou",
"rank": "21"
}, {
"name": "Baotou",
"rank": "23"
}]
}]
}
In html if I click header of table then it will sort the table both ascending and descending order but I am unable to do this.
<th>
RANK
<span ng-show="predicate === 'rank'" ng-class="{reverse:reverse}"> </span>
</th>
<ul ng-repeat="city in countryType">
<li ng-repeat="details in city.data.cities | orderBy:predicate:reverse">
<div class="text" id="t1"> {{details.name}} </div>
<div class="text" id="t2"> {{details.rank}}</div>
<div class="text" id="t3"> {{details.population}} </div>
<div class="text" id="t4"> {{details.language}}</div>
</li>
</ul>

You can make a dynamic sorting by clicking on the header divs doing like that :
<ul ng-repeat="city in countryType">
<li>
<div class="text" ng-click="orderListBy('name')"> Name </div>
<div class="text" ng-click="orderListBy('rank')"> Rank</div>
<div class="text" ng-click="orderListBy('population')"> Population </div>
<div class="text" ng-click="orderListBy('language')"> Language</div>
</li>
<li ng-repeat="details in city.data.cities | orderBy:predicate:reverse">
<div class="text" id="t1-{{$index}}"> {{details.name}} </div>
<div class="text" id="t2-{{$index}}"> {{details.rank}}</div>
<div class="text" id="t3-{{$index}}"> {{details.population}} </div>
<div class="text" id="t4-{{$index}}"> {{details.language}}</div>
</li>
</ul>
And in your controller
//initialize values
$scope.predicate = 'rank';
$scope.reverse = false;
$scope.orderListBy = function(attr){
$scope.predicate = attr;
$scope.reverse = !$scope.reverse;
};
Doing so it will revert the sort when re-clicking on the header of a column.
PS : don't forget to dynamically name your IDs in the ng-repeat directive to avoid errors and have a valid HTML code.

Ng-repeat ,firebase and lots of data models

my fiddle here http://jsfiddle.net/prantikv/1nvdzv24/
i have my data form firebase like this
$scope.gotData={
"date": {
"date": "11/23/24"
},
"menuList": {
"item1": {
"val1": "a1",
"val2": "a2",
"val3": "a3"
},
"item2": {
"val1": "b1",
"val2": "b2",
"val3": "b3"
},
"item3": {
"val1": "c1",
"val2": "c2",
"val3": "c3"
}
}
}
i show the data on the screen where the user can edit like this:
<ul class="formContainer">
<li ng-repeat="(name,rates) in gotData.menuList" my-repeat-directive>
<label for="{{name}}">{{name}}</label>
<span ng-repeat="(rateType,val) in rates">
<input type="text" id="{{rateType}}" value="{{val}}">
</span>
</li>
</ul>
i have a button at the end
<button type="button" class="btn btn-warning" ng-click="updateData()">update Data</button>
what i want to do is that when the user clicks the update button the data gets updated in the corresponding node on firebase. i am only wanting an update not a set or remove in this case.
How do i do that?