I have table with ng-repeat values which I fetch from mysql(Codeigniter).
and this table has checkbox which I select to create a JSON.
<tr ng-repeat="subject in subject_list | orderBy: 'sub_branch' | filter: search_subject">
<td><input type="checkbox"
ng-true-value="{{subject.sub_id}}"
ng-model="checkmodel.subject.sub_id"
ng-true-value="subject.sub_id"
ng-name="subject_name"></td>
<td>{{subject.sub_name}}</td>
<td>{{subject.sub_branch}}</td>
<td>{{subject.sub_code}}</td>
<td>{{subject.sub_sem}}</td>
<td><select ng-model="checkmodel.subject.section" ng-disabled="!checkmodel.subject.sub_id">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select></td>
</tr>
Problem 1: I'm only able to select one checkbox.
Problem 2: When I select a value from dropdown, the same value automatically selected in other dropdown boxes.
Here is sample JSON: {"subject":{"sub_id":1,"section":"A"}}
For both of the problem, I would suggest you inspect the elements to make sure that the ng-model is not same. You have to have different models for every checkbox as well as select menu.
Related
I am facing a problem with the below code.
<tr ng-repeat="diag in diags track by diag.id">
<td>
<select id="ddTest" ng-change="changeevent()">
<option value="">Select Number</option>
<option ng-repeat="o in orderNumbers" data-diagId="{{diag.id}}" ng-selected="o==diag.ordernumber">{{order}}
</option>
</select>
</td>
</tr>
$scope.orderNumbers= [1,2,3,4,5,6,7,8,9,10];
In diags object is an array which contains ordernumber in it. I am trying to update the specific ordernumber from ddTest dropdown change to the diags object using the custom attribute data-diagId. I don't have any model for ddTest dropdown (I can add it if needed). I want to populate the value on load and also need to update the parent object with the new order number selected. Can anybody help me to do this ?
Use ng-options directive and ng-model in Your select, then diag.ordernumber will change every time select is changed, so selected option is connected to model without any additional programming. Here full working example:
var app = angular.module("diagApp", []);
app.controller("diagController", function($scope) {
$scope.orderNumbers= [1,2,3,4,5,6,7,8,9,10];
//test diags
$scope.diags=[
{id:1,ordernumber:1},
{id:2,ordernumber:2},
{id:3,ordernumber:3}
];
//to prove that diag is changing
$scope.change=function(diag){
console.log(diag);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="diagApp">
<table ng-controller="diagController">
<tr ng-repeat="diag in diags track by diag.id">
<td>
<select ng-change="change(diag)" id="ddTest" ng-model="diag.ordernumber" ng-options="item as item for item in orderNumbers track by item">
</select>
</td>
</tr>
</table>
</div>
I dug a few hours without finding an answer to what i want to do. I'm working on a complicate form with a lot of variables, so i'll try to narrow my request here :)
var list = [{id:0, name:opt0}, {id:1, name:opt1},{id:2, name:opt2}];
var selected = ['opt1', 'opt2'];
var numberOfRows = 2;
I got a variable number of select based on a variable. So i use ng-repeat like this :
<tr ng-repeat="i in numberOfRows track by $index">
<td>
<select list.indexOf(selected[$index]) as item for item in list></select>
</td>
</tr>
the result should be like this
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1" selected="selected"></option>
<option label="opt2" value="opt2"></option>
</select>
</tr></td>
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1"></option>
<option label="opt2" value="opt2" selected="selected"></option>
</select>
</tr></td>
I tried many way to write my ng-option.
what i have actually is the correct number of select with the list inside each of them, but each select should have a different pre selected variable. And they all are selected on the last value of my list. No matter what i try.
ps: the values in my array 'selected' are always in the list[$index].name
If someone knows how to achieve that i will be very happy ^^
....
little side request : Is it possible to do a filter on the list which will remove/hide the selected option trough all the selects?
result like this :
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1" selected="selected"></option>
//opt2 removed because it's selected in another select
</select>
</tr></td>
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
//opt1 removed because it's selected in the previous select
<option label="opt2" value="opt2" selected="selected"></option>
</select>
</tr></td>
thanks :)
I tried your existing solution on the first part, but i don't know how you manage to make this line of code work:
<tr ng-repeat="i in numberOfRows track by $index">
So i did my own version just basing on your desired output, using $scope.selected as the ng-model array, as you can see i am mutating your $scope.selected to have a value of [{id:1, name:'opt1'},{id:2, name:'opt2'}] which are the complete object preselected value of ['opt1', 'opt2'].
$scope.list = [{id:0, name:'opt0'}, {id:1, name:'opt1'},{id:2, name:'opt2'}];
$scope.selected = ['opt1', 'opt2'];
$scope.selectModels = [];
var newSelected = [];
angular.forEach($scope.selected, function(value, key) {
this.push($filter("filter")($scope.list, {name: value})[0]);
}, newSelected);
$scope.selectModels = newSelected;
And you markup:
<tr ng-repeat="i in selected">
<td>
<select ng-model="selectModels[$index]" ng-options="option.name for option in list track by option.id" class="form-control"></select>
{{ selectModels[$index] }}
</td>
</tr>
I think your side question is possible if you generate a different list for each row, or use options-disabled for that row.
Here is working jsfiddle hope this helps. You can set a new question of your side request.
This question already has answers here:
How to set a selected option of a dropdown list control using angular JS
(9 answers)
Closed 7 years ago.
Here is the problem, I create table with ng-repeat, in table td I have select with option, I need to set selected option.
<tr id="edit" ng-repeat="x in products">
<td style="width: 2%;display: none;">{{x.id}}</td>
<td style="width: 16%"><h6 style="font-weight: normal;" ng-bind="nameResult" ng-hide="false"></h6>
<select style="margin: -16px 0 0 0;" class="span12" style="margin: 0;" ng-change="loadProductData(x)" id="product_list" ng-options="prod.product_name as prod.product_name for prod in items track by prod.product_id" ng-model="selectedOption">
<option value="">Select product</option>
<option label="Registracija korisni" value="57">Registracija korisni</option>
<option selected="selected" label="Testing of platform" value="58">Testing of platform</option>
<option label="Test 2" value="63">Test 2</option>
<option label="irfam" value="87">irfam</option>
<option label="ddd" value="88">ddd</option>
</select>
</td>
<tr>
So I have multiple select with same ng-model how to set selected different option for each select.
Since your ng-model="selectedOption" then angular will select the option which matches selectedOption. Since you are tracking by prod.product_id then selectedOption will need to be set to a prod.product_id.
I see you have set some options manually. If these are not being selected properly you may need to add these items to your prod object, then let angular create the options for you.
Am using a drop down box in my form which lists items.
this is html code :
<tr>
<td><label>items</label></td>
<td>
<select ng-model="addItems.item" ng-options="item.name for item in itemList" ng-init="getItemsList()">
</select>
</td>
</tr>
this is my controller:
$scope.getItemsList = function() {
$http({
method : "GET" ,
url : "/items/allitems"
}).success(function(data) {
$scope.itemList = data;
$scope.additems.item = $scope.itemList[0].id;
});
};
Problem is :Am getting item's list from controller and binded those through ng-model. But i list item's name in drop down and if i select any then particular item's id will be sent to database for storing.
If i run this code i got the below result in browser :
<option value="?" selected="selected"></option>
<option value="0">pen</option>
<option value="1">notebook</option>
<option value="2">marker</option>
Can anyone please tel me whether i did any mistake and give me a tips to have 1st value as default one instead of empty selection
There might be one tip for ng-init label and I met this similar issue before.
You can use below html codes:
<tr>
<td><label>items</label></td>
<td ng-init="getItemsList()">
<select ng-model="addItems.item" ng-options="item.name for item in itemList">
</select>
</td>
</tr>
change your ng-options to
ng-options="item.id as item.name for item in itemList"
and your code should then work.
You can use dropdown option id or name assigning index to the model on dropdown init
as given below
<tr>
<td><label>items</label></td>
<td>
<select ng-model="addItems.item" ng-options="item.id as item.name for item in itemList" ng-init="addItems.item=itemList[0].id">
</select>
</td>
</tr>
I have managed to filter out what i want, the problem is it only brings back the first object in the database that matches it. i am trying to have a select box with filter by the job salary minimum. $50,000 $60,000 and so on. for example, when i select the $50,000 option the only result returned is jobs that have there salary set at exactly 50000. I need everything returned that is above 50000. any help is appreciated.
Controller
$scope.salaryFilter = function (min) {
return min.salaryMin >= $scope.salary_Min ;
}
View
<label>Salary Desired:</label><br />
<select class="form-control" ng-model="search.salaryMin">
<option value="">Select</option>
<option ng-repeat="salary in jobArray | filter:salaryFilter"></option>
<option ng-model="salary_salaryMin" value="50000">$50,000</option>
<option ng-model="salary.salaryMin" value="60000">$60,000</option>
<option ng-model="salary.salaryMin" value="70000">$70,000</option>
<option ng-model="salary.salaryMin" value="80000">$80,000</option>
<option ng-model="salary.salaryMin" value="90000">$90,000</option>
<option ng-model="salary.salaryMin" value="100000">$100,000</option>
</select><br />
Here's a plunker with a basic example of how to do this.
From the behaviour you describe, it sounds like you may be matching strings rather than integers, but we won't know if you don't show us more code
Controller:
$scope.data = [
{
"val":27000,
"text":"$27,000"
},{
"val":29000,
"text":"$29,000"
},{
"val":50000,
"text":"$50,000"
},{
"val":70000,
"text":"$70,000"
}];
$scope.name = "John";
$scope.salaryMin = 27000;
$scope.salaryFilter = function(salary) {
if (salary.val >= $scope.salaryMin)
return true;
}
Template:
<select >
<option ng-repeat="salary in data | filter: salaryFilter" value="{{ salary.val }}">{{ salary.text }}</option>
</select>
Changing the value of $scope.salaryMin will filter the data
Edit
The problem is shown in this plunker, and i've created a fork here which fixes the issue
There were a couple problems
We're setting the individual salary options manually in the option list, so there's no need for the ng-repeat in our salary select box. We also need this select box to set the $scope.salary_Min variable, so we shouldn't have ng-model set to salary.salaryMin on the option tags.
<!-- REMOVE THIS -->
<option ng-repeat="salary in jobArray | filter:salaryFilter"></option>
<!-- REMOVE ng-model FROM these -->
<option ng-model="salary_salaryMin" value="50000">$50,000</option>
<option ng-model="salary.salaryMin" value="60000">$60,000</option>
<option ng-model="salary.salaryMin" value="70000">$70,000</option>
<option ng-model="salary.salaryMin" value="80000">$80,000</option>
<option ng-model="salary.salaryMin" value="90000">$90,000</option>
<option ng-model="salary.salaryMin" value="100000">$100,000</option>
Because we want the select box to set the $scope.salary_Min variable (which is used in our filter), we add ng-model to the select tag
<select class="form-control" ng-model="salary_Min">
We previously had the salaryFilter on our option tag, but we want to use it to filter the table. So we add it to the table where we're using ng-repeat. It's okay to keep the existing search filter because filters in Angularjs are stackable
<tr ng-repeat="job in jobArray | filter:search | filter:salaryFilter">
<td>{{job.jobTitle}}</td>
<td>{{job.companyName}}</td>
<td>{{job.description}}</td>
<td>{{job.city}}</td>
<td>{{job.salaryMin}}</td>
</tr>
This is nearly done. The one issue left is that these values are being interpreted as strings by our filter, which can cause some confusing results. We just need to make sure they're interpreted as integers using parseInt()
$scope.salaryFilter = function (min) {
return parseInt(min.salaryMin) >= parseInt($scope.salary_Min) ;
};