First look at my fiddle
JavaScript:
function CountryCntrl($scope) {
$scope.filters = {};
$scope.categories = [{
"id": 1,
"title": "Company",
"children": [{
"id": 2,
"title": "About",
"children": [{
"id": 6,
"title": "Company profile",
"children": [],
"isRoot": false
}],
"isRoot": false
} ..
}
HTML:
<div class="row" ng-controller="CountryCntrl">
<div class="col-lg-12">
<h4>Filter by:</h4>
</div>
<div class="col-lg-12">
<form>
<div class="row">
<div class="col-xs-4" ng-repeat="cat in categories" ng-if="cat.isRoot==true">
<div class="form-group">
<select ng-if="cat.isRoot==true" class="form-control" ng-model="filters.rootCat" ng-options="sub_cat.title for sub_cat in cat.children track by sub_cat.id">
<option value="">level 1 - {{$index}}</option>
</select>
</div>
<div class="form-group">
<select class="form-control" ng-model="filters[cat.id]" ng-options="sub_sub_cat.title for sub_sub_cat in filters.rootCat.children track by sub_sub_cat.id">
<option value="">level 2 - {{$index}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
I'm not able to display the options of the select of the second level only, related to the first level.
In my fiddle you can see that you change the value of "level 1-0" the select below "level 2 - 0" is correctly populated but is binded the "level 2 - 6" too...
What's wrong ?
The problem is that you have an ng-repeat in which you use the same object as model for each item repeated, which means they will conflict and affect each other.
The simplest solution is probably to change filters.rootCat to filters['rootCat'+$index].
That way you ensure that each column of dropdowns have their own model.
Related
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are come in tabs only
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.homePlayers = [{
"id": "586150f2d99139510b4254bb",
"name": "Sachin Tendulkar",
"country": "India"
}, {
"id": "586150f2d99139510b4254b1",
"name": "Saurav Ganguly",
"country": "India"
}];
$scope.awayPlayers =
[{
"id": "586150f2d99139510b4254b2",
"name": "Shane Watson",
"country": "Aus"
}, {
"id": "586150f2d99139510b4254b3",
"name": "Steve Waugh",
"country": "Aus"
}];
});
this is my html content how to populate
<body ng-app="plunker" ng-controller="MainCtrl">
India bat vs Aus bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('hometeam')">UPDATE SCORE</a>
</div>
Aus bat vs India bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('awayteam')">UPDATE SCORE</a>
</div>
</body>
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are not come in same page in my webpage tabs only.But when i am using this way ny browser will hang.
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
I am facing problem in two radio group box in ionic when i click on one group of radio the selected answer was saved after clicking second radio group first selected radio was removed
<div ng-app="ionicApp" ng-controller="HomeCtrl" style="padding:25px">
{{question | json }}
<div ng-repeat="q in question" >
<div class="list">
<div class="item item-divider">
{{q.question}}
</div>
<ion-radio ng-repeat="option in q.options" ng-value="option" ng-model="q.answer" >
{{ option }}
</ion-radio>
<br>
</div>
</div>
angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope) {
$scope.question =
[
{
"is_radio": true,
"question": "Roughly how much of your profile was spent on digital activities in your last job?",
"options": ["Less than 10%","Less than 25%","Less than 50%","More than 50%"],
"id": "130",
"answer": ""
},
{
"is_radio": true,
"question": "Have you spent more time with B2B or B2C?",
"options": ["B2C","Both","Less than 10%"],
"id": "130",
"answer": ""
}
]
})
Here is preview | jsfiddle
Please change following line of code
<ion-radio ng-repeat="option in q.options" ng-value="option" ng-model="q.answer">
With this
<ion-radio ng-repeat="option in q.options" ng-value="option" ng-model="q.answer" name="radio_{{$parent.$index}}" >
This will solve your issue. Problem was due to same name given to 2 radio button group. So I had changed that and given dynamically.
angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope) {
$scope.question =
[
{
"is_radio": true,
"question": "Roughly how much of your profile was spent on digital activities in your last job?",
"options": ["Less than 10%","Less than 25%","Less than 50%","More than 50%"],
"id": "129",
"answer": ""
},
{
"is_radio": true,
"question": "Have you spent more time with B2B or B2C?",
"options": ["B2C","Both","Less than 10%"],
"id": "130",
"answer": ""
}
]
})
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
<div ng-app="ionicApp" ng-controller="HomeCtrl" style="padding:25px">
{{question | json }}
<div ng-repeat="q in question" >
<div class="list">
<div class="item item-divider">
{{q.question}}
</div>
<ion-radio name="{{q.id}}" ng-repeat="option in q.options" ng-value="option" ng-model="q.answer" >
{{ option }}
</ion-radio>
<br>
</div>
</div>
</div>
I have this array of an array of objects that I am pushing onto from results I pass from a modal;
[
[
{
"id": 4,
"name": "THROTTLE TUBE",
"partno": "104-",
"oemnumber": "46019 038",
"stock": 19,
"price": "28"
},
{
"id": 28,
"name": "TACHOMETER, CUP",
"partno": "128-",
"oemnumber": "25012 011",
"stock": 7,
"price": "46"
}
]
]
I am getting this from the following;
$scope.woParts = [];
//later in my modal code - which is where the double [] is coming from
modalInstance.result.then(function(woParts) {
$scope.woParts.push(woParts);
I am then using this ng-repeat in my view;
<div ng-repeat="woPart in woParts">
<div class="col-md-4">
#{{ woPart[$index].name }}
</div>
<div class="col-md-2">
#{{ woPart[$index].oemnumber }}
</div>
<div class="col-md-2">
#{{ woPart[$index].price | currency}}
</div>
<div class="col-md-2">
<input type="number"
class="form-control"
ng-model="partQty">
</div>
</div>
This only displays the first result in the array. Why is that?
Thanks!
I don't think you should push woParts into another object. Just save it to the scope: $scope.woParts = woParts;. Then there is no need to use $index in the ngRepeat, just use regular dot notation: woPart.name.
Or if you have to push woParts into another array, then you can change the ngRepeat expression to woPart in woParts[0].
I have an ng-repeat that displays 2 forms (the array has 2 items)
I have an empty input for each of these, that has the same model, something like the following:
<div ng-repeat=“group in groups”>
<form>
<input type=“text” ng-model=“group.name” placeholder=“name” />
</form>
</div>
Now this works well, until I try to enter text into the first input, it automatically enters into the second as well.
Is there an easy way to bind to the input i’m actually typing in?
Thanks
Your PLNKR example doesn't match your question.
Simplifying your code:
<!-- Top loop doesn't repeat -->
<div ng-repeat="group in groups">
<div ng-repeat="g in group">
<div ng-repeat="info in g.info.data">
<input ng-model="info.name" placeholder="Name" />
</div>
<!-- This is the problem -->
<input ng-model="test.name" placeholder="Name">
<button ng-click="nameAdd($parent.$index)">
Add
</button>
</div>
</div>
The input with the Add button uses the same ng-model name. Also here are three nested loops when only two are needed.
The Data
$scope.groups = {
"data": [{
"id": 1,
"name": "Group 1",
"site_id": 3,
"info": {
"data": [{
"id": 1,
"name": "Jim"
}]
}
}, {
"id": 2,
"name": "Group 2",
"site_id": 3,
"info": {
"data": [{
"id": 10,
"name": "Bob"
}, {
"id": 11,
"name": "Terry"
}]
}
}]
}
Change the template to:
<!-- remove top loop
<div ng-repeat="group in groups">
-->
<div ng-repeat="groupDatum in groups.data" ng-cloak>
<div ng-repeat="infoDatum in groupDatum.info.data">
<input ng-model="infoDatum.name" placeholder="Name" />
</div>
<!-- use groupDatum to store new name -->
<input ng-model="groupDatum.newName" placeholder="Name">
<!-- use groupDatum as arg to ng-click -->
<button ng-click="nameAdd(groupDatum)">
Add
</button>
</div>
The nameAdd function:
$scope.nameAdd = function(groupDatum) {
var newId = uniqueId();
var newName = groupDatum.newName;
groupDatum.info.data.push({id: newId, name: newName});
}
try like this,
<div ng-repeat=“group in groups”>
<form>
<input type=“text” ng-model=“groups[$index].name” placeholder=“name” />
</form>
</div>
you also probably put the form tag outside of the repeater unless you want to create a new from for every input tag
In AngularJS - I have dropdown code as below. type.entityTypeId field is a long data type. The dropdown works fine in the create page and able to insert the 'type.entityTypeId' field into the DB.
But it does not work while reloading the same data in the Edit page with same code.
Is this problem because I have the datatype as Long ?
I have other drop downs working fine in which I have all String data type.
<div class="form-group">
<label class="control-label col-md-2 required">ENTITY TYPE</label>
<div class="col-md-2">
<select name="entityType" class="form-control" ng-model="entity.entityType.entityTypeId"
required="required">
<option value="">Please select</option>
<option ng-repeat="type in entityTypes" value="{{type.entityTypeId}}">{{type.entityTypeName}}</option>
</select>
</div>
<span style="color: red" ng-show="entityAddForm.entityType.$invalid"> <span
ng-show="entityAddForm.entityType.$error.required">Entity type is required.</span>
</span>
</div>
Updated:
This is a json used to load the drop down data. And you can see the entityTypeId is a number. In other cases it works if the id is a String.
[
{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
},
{
entityTypeId: 1,
entityTypeName: "Legal Entity"
},
{
entityTypeId: 2,
entityTypeName: "Notional Entity"
}
]
As per the documentation at: https://docs.angularjs.org/api/ng/directive/select
It looks like you do need to use a String at the moment.
Using numbers should not be an issue. I know that the documentation only uses string, but I'm able to use the same using number.
<div ng-app="myApp" ng-controller="myController">
<select ng-model="entity.selected">
<option value="{{ent.entityTypeId}}" ng-repeat="ent in entityTypes">{{ent.entityTypeName}}</option>
</select>
Selected entity id {{entity.selected}}
</div>
angular.module("myApp", [])
.controller("myController", ["$scope", function ($scope) {
$scope.entityTypes = [{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
}, {
entityTypeId: 1,
entityTypeName: "Legal Entity"
}, {
entityTypeId: 2,
entityTypeName: "Notional Entity"
}];
$scope.entity = {
selected: 3
};
}]);
JSFiddle