Here I am binding values to ng-click as
<input type="checkbox" ng-model="a.CheckAssign"ng-click="myFunctionnew(a.ENQUIRY_CODE,a.CheckAssign)" />
enquiryArr=[]
$scope.myFunctionnew = function(enqcode,checkassign)
{
enquiryArr.push(enqcode + '&' + checkassign)
var uniqueNames = [];
$.each(enquiryArr, function (i, el) {
if ($.inArray(el, uniqueNames) === -1) {
uniqueNames.push(el);
console.log(uniqueNames)
}
else
{
console.log(uniqueNames);
}
}
Here when I check and uncheck the checkbox the value is storing multiple
Please help me how can I store Enquiry code and T/F values.
If I understand your issue correctly, you're running into duplicate entries in your enquiryArr. You're running into this because you're trying to manually keep track of the array in an odd fashion. While there are ways to correct the way you're storing it, it's even easier to have angular track what is checked and what is not.
Using the following DataSet:
$scope.enquiries = [
{ENQUIRY_CODE: 'ENQUIRY_1', ENQUIRY_NAME: 'First Enquiry', selected: false},
{ENQUIRY_CODE: 'ENQUIRY_2', ENQUIRY_NAME: 'Second Enquiry', selected: false},
{ENQUIRY_CODE: 'ENQUIRY_3', ENQUIRY_NAME: 'Third Enquiry', selected: false},
{ENQUIRY_CODE: 'ENQUIRY_4', ENQUIRY_NAME: 'Fourth Enquiry', selected: false}
];
And binding the selected field to your checkboxes ng-model
<div ng-repeat="e in enquiries">
<input type="checkbox" ng-model="e.selected" />
{{e.ENQUIRY_NAME}}
</div>
You can determine which one is checked simply by looking at the $scope.enquiries array and looking for selected: true (or false if you want to know the ones not checked).
In javascript you can use a simple Array Filter to get the selected values as such:
$scope.enquiries.filter(e => e.selected);
Or if you want to get them in your template, you can also use the filter pipe as such:
{{(enquiries | filter:{selected:true})}}
Here is an interactive plunkr that you can view this.
Misc Note: If you do want to run something when the checkbox is clicked, you can still use an ng-click and run your custom code, however, I would recommend using ng-change as there are other ways to change the selected value of a checkbox other than clicking.
I have test your code and its working fine. your problem is not so much clear so you can check following test code.
<div ng-controller="MyController">
<div ng-repeat="dt in data">
<input type="checkbox" ng-model="CheckAssign" ng-click="myFunctionnew(dt.name,dt.volume)" />
</div>
</div>
Javascript
$scope.myFunctionnew = function(enqcode,checkassign)
{
enquiryArr.push(enqcode + '&' + checkassign)
var uniqueNames = [];
for(i=0; i <enquiryArr.length; i++) {
if ($.inArray(enquiryArr[i], uniqueNames) == -1) {
uniqueNames.push(enquiryArr[i]);
console.log(uniqueNames)
}
else
{
console.log(uniqueNames);
}
}
}
JSFiddle
Related
I have searched for a solution to my problem but have not been able to find the right answer.
I have a list of all questions and a list of selected questions. I need to build a list of checkboxes from the list of all questions and check the ones that are in the list of selected questions. When changes are made to the checkboxes, I need the list of selected questions to be updated accordingly. The list of all questions never changes. How can I accomplish this? Here's a very abbreviated version of my situation:
var MyApp = angular.module('MyApp', []);
MyApp.controller('MyController', ['$scope', function ($scope) {
$scope.allQuestions = [
{ q_id: 1, q_txt: 'What time is it?', q_sort: 1},
{ q_id: 2, q_txt: 'What is that?', q_sort: 2},
{ q_id: 3, q_txt: 'Who are you?', q_sort: 4},
{ q_id: 4, q_txt: 'What color is that?', q_sort: 3}
];
$scope.selectedQuestions = [
{ q_id: 1, other_prop: 'yyy' },
{ q_id: 4, other_prop: 'zzz' },
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-repeat="question in allQuestions"><input type="checkbox" ng-model="x" /> {{ question.q_txt }}</div>
</div>
In my application the lists come from a server and I would like to be able to return the selected questions list as an object back to the server when saving the changes.
I can't figure out the binding to accomplish this, or how to check the right checkboxes. Notice that the two lists are different, but bothe have the q_id value as the key to match them. Any help would be greatly appreciated.
It doesn't sound like you need to worry about which questions are selected until the user submits the form, so I'd just loop through the list of all questions at that time and create an array of the selected questions.
Something like this:
function getSelections() {
var selectedQuestions = []
$scope.allQuestions.forEach( function(question) {
if (question.selected) {
var questionCopy = angular.copy(question)
selectedQuestions.push(questionCopy)
}
})
return selectedQuestions
}
Then call this function before you post and pass the results to your API.
You should just be able to use ng-model to handle preselecting the checkboxes that should be preselected with:
<div ng-repeat="question in allQuestions"><input type="checkbox" ng-model="question.selected" /> {{ question.q_txt }}</div>
Something like this should do the trick. Using array.find() might be more efficient. Using a library like _ would make this easier.
$scope.selectedQuestions.map( function(selectedQuestion) {
var match = $scope.allQuestions.some( function(question) {
if (question.q_id == selectedQuestion.q_id) {
question.selected = true
return true
}
return false
}
}
I am trying to create a form using angularJs, I have some attributes which is of integer type.
for example, I have variable called admin_events, it has 3 values, 0, 1, 2 to indicate the user's right/permisson to access different files. The number 0 means no right, 1 means view only, 2 means full right.
Now I want to create a form for editing this attributes for the administrator.
How should I go about doing this?
I am thinking of using a angularJs to make 3 radio buttons/checkboxes of 1,2,and 3, so that the administrator can just click on the option and it will update the attributes.
Anyone has any suggestion on what is the best way to do this?
This is one possible approach. See inline comments for explaination.
app.controller('MainCtrl', function($scope, $filter) {
// set up your model
$scope.allPermissions = [
{ "id" : 3, "name" : "ADMIN", selected: false },
{ "id" : 2, "name" : "READ", selected: false },
{ "id" : 1, "name" : "WRITE", selected: false } ];
// Use $watch to detect changes in the model.
// But you might as well want to call this from an event or whatever...
$scope.$watch('allPermissions', function(newval, oldval){
if (oldval != newval)
{
// only return the checked values using $filter
var selectedPermission = $filter('filter')($scope.allPermissions, {selected: true});
// 'selectedPermission' will return a list of all selected permissions.
// Use 'selectedPermission[0].id' to return the first value.
$scope.admin_events = selectedPermission[0].id;
}
},true);
});
And in your HTML
<body ng-controller="MainCtrl">
<p ng-repeat="permission in allPermissions">
<input type="checkbox" ng-model="permission.selected"/>
{{permission.name}}
</p>
admin_events: {{admin_events}}
</body>
In the end, I decided to use a range type input to achieve the selection. It is much easier to implement.
<input ng-model= "user.activities.events" name="activities.events" type="range" max="2" min="0" class="form-control">
But i think #sjokkogutten's answer is not bad too. But the checkboxes are not mutally exclusive. Thanks anyway #sjokkogutten.
I have an angularjs object like this:
$scope.afterLogin = [
{value: 'customers|follow-ups', text: 'Follow Ups'},
{value: '', text: 'not set'}
];
I'm trying to use it with xeditable as follows:
<span
editable-select="user.default_module"
e-ng-options="s.value as s.text for s in afterLogin"
e-name="default_module"
e-form="rowform">{{s[user.default_module] as s.text for s in afterLogin}}</span>
What I am trying is to show the text-property in afterLogin that is defined by user.default_module. What am I doing wrong? I am getting parse errors on s[user.default_module] as - how do I reference a property of an object in this scope?
Note: this is wrapped with ng-repeat="user in users".
You are trying to display currently selected value in a very strage way. In the official example they are using filter for this purpose. However, you can simplify it by builing a value: label map, i.e.:
$scope.afterLoginLabels = {};
for (var i = 0; i < $scope.afterLogin.length; i++) {
$scope.afterLoginLabels[$scope.afterLogin[i].value] = $scope.afterLogin[i].text;
}
Then, display text value as:
<span [...]>{{ afterLoginLabels[user.default_module] }}</span>
See JSFiddle.
I've got an angularjs application that has a form/controller that look essentially like this (boiled down to the pertinent stuff):
angular.module('testApp', [])
.controller('testCtrl', function ($scope) {
$scope.envelopes = [{
id: 1,
name: 'first',
default_spend: '1'
}, {
id: 2,
name: 'second',
default_spend: '0'
}, {
id: 3,
name: 'third',
default_spend: '0'
}, ];
});
And a form that looks roughly like this:
<div ng-app="testApp">
<div ng-controller="testCtrl">
<div ng-repeat="envelope in envelopes">
<div>{{envelope.name}}
<input type="radio" name="default_spend" ng-model="envelope.default_spend" ng-value="1" />
Default Spend: {{envelope.default_spend}}
</div>
</div>
</div>
</div>
You can see this in action with this fiddle.
As you can see, the first envelope is marked as the default_spend envelope and the other two aren't. When I select a different envelope, that envelope also gets marked as the default_spend, but when the radio button is unselected, the model value stays the same ("1"). I understand that I'm dealing with a child scope here due to ng-repeat, but is there a way for me to set an "unselected" value without having to jump through hoops with ngChange?
Not really. When you use ng-value it is what is going to get bound to the ng-model and in your case all of them are having value 1. Also i really did not get the purpose of toggling 1 and 0, however you could just achieve it this way:-
<input type="radio" name="default_spend"
ng-click="selected.envelope = envelope" /> <!--Register an ng-click and set selected one
Default Spend: {{getDefSpend(envelope)}}</div> <!-- Show the text based on selection-->
And in your controller:-
$scope.selected = {envelope: $scope.envelopes[0]};
$scope.getDefSpend = function(envelope){
return $scope.selected.envelope === envelope ? 1 : 0;
}
//$scope.selected.envelope will be your selected option at any point.
Demo
It's because what you have is actually 3 different model values. To work as you want it, you would have ONE model value for all 3. You can either restructure your data, or use ng-change to modify your model manually.
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;
}