I currently list a set of options for ng-options from a resource that contains JSON.
[
{
id:23,
name:"Other"
},
{
id:24,
name:"Crew"
},
{
id:25,
name:"Announcer"
},
{
id:26,
name:"Producer"
},
{
id:27,
name:"Cameraman"
},
{
id:28,
name:"Monitor"
}
]
This is all added into my scope at $scope.broadcaster = response.data. I then loop through everything in my options by a simple ng-options.
<select ng-model="selectedrole" ng-options="roles as roles.name for roles in broadcaster" ng-init="selectedrole=broadcaster[0]">
</select>
Everything goes good once the page loads up. I can select from my list of names and the ng-init starts on the first selection as anticipated. However I have a few issues that I can't seem to resolve.
1) In my doc I set up {{selectedrole}} and I expected to see the contents of my model on the page reflected by my current selection. Instead I see no output at all. I can't tell if the model is even being updated properly so I'm not sure if I can use it in my formdata.
2) This select is generated on click so users can select a role for more than one person. However since the model is the same, any selection is copied over which ever one is changed. I need to find a way to output the model to check the data, but make that model dynamic so i can get a list of results from all the different selections.
EDIT:
Now this is really crazy. I mocked it up in a plunker and its at least showing the model just fine. Are there some conflictions I should worry about that would stop the model from updating? I literally copy pasted my data and its working in plunker but not my project.
http://plnkr.co/edit/GbdOmdjj1M3OuZKO5cSq?p=preview
EDIT2:
Even more info. As I stated before, the select is created when a user clicks on a function that creates an ng-repeat with user information and a new select option for role. If I place the {{selectedrole}} within that ng-repeat I actually get all the data returned when I user selects it. It seems that since the click creates a push of new data, it will not work outside each item. The issues now is that every instance has its own model so i need to figure out how to gather all this data from each ng-repeat and post it to the form. I'll try to update as I work through the issue.
Related
I have a simple component to display a list of items. I have a ngfor loop and inside it a checkbox with a [(ngModel)]. Everything works as expected.
<div *ngFor="let armor of armorList">
<input type="checkbox" [(ngModel)]="armor.obtained" />
<span>{{armor.name}}</span>
</div>
I have create a get property called name like below. (I have removed the implementation itself just for the example)
get name(): string {
console.log("test");
return "test";
}
What I think is odd is that, if I click on the checkbox of one item on the list, this get property is being called for all the items on the list twice. I would assume that it should not be called at all, since I am just updating one property of one item, not related to the rest.
https://plnkr.co/edit/KqDpuw1QeXOCFNODbqiW?p=preview
I have create the example above. If you click on one of the checkbox you can see that "test" is being displayed 6 times on the console.
Any ideas?
Regards
Leo
That's because angular rechecks the model again after updating the views to verify that it hasn't changed. This is done to ensure the stability of the model and that updating the view doesn't update the model again and you start an infinite loop. If angular finds that the model has changed after updating, it will throw ExpressionChangedAfterItHasBeenCheckedError error.
Note that this only happens in development mode.
For further reading : see this article
It will be called twice only in the development mode for verifying that the moel has not been changed. If model will be changed in the second call, it will throw error. So you can detect the wrong cases at the development stage. When you build your bundles in the production mode, it will call once.
Is it possible to change the variable's value and use the changed value after the page is already loaded?
I need to do the following:
Load the page with all user's records. [a single db query]
User selects option [active, in-active, all]
User exports the records to excel file
Only records belonging to ex-users, active users, or all, should be exported based on the selected option
I sent the drop-down's value on-change using ajax.
And I need to run some logic like:
if(isset($userStatus))
{
if($userStatus == 1)
{
$objPHPExcel->getActiveSheet()->setCellValue('A1', $result['name']);
}
}
It is not an actual code, I'm just trying to create a picture of what I intend to do. I need to do without reloading the page.
This may sound dumb, but I need some help with this.
I agree with cars10m ...
do the filter in the client side in js/jQuery
When the page load first time, from PHP save the records to javascript array of objects.
when filter some options, save the filter to another js object,
and after every changes/search that triggered...
iterate you original js array of object (that created from PHP),
and render again or even show/hide relevant rows after you test the filters.
I've form with some input fields, upon submit I make a $http call and populate a model object that binds data to a table on my view. Once user saw the result, they may change the data in the form and submit the same once again, I'm trying to clear the result and populate the data with the new result. Some time the result can be same, in such cases user is not able to understand whether the form was submitted and new results has been updated or not. I'm setting my model object to undefined expecting that the data on the table will get wiped. I also have an ng-if for null check of the object and control the display of the table, I expect it to hide the table, but unfortunately it is not happening. How can I do that? $scope.apply() is the only way for me to do that. I hate to use it as it causes full digest cycle. Please advise.
You can create a separate scope for clearing the data and call that using model on button click.
Example
$scope.clearData = function () {
$scope.ApplicationFormName = "";
$scope.FirstName="";
//put your logic for clearing the form here
};
in HTML
<button title="Clear" ng-click="clearData()"></button>
I have a JSON doc in the following format and need to use that to dynamically build check boxes using angular.
var data = {
"Name":[
{
"tagId":4489,"name":"Name","label":"Employee Name"
}
],
"Service":[
{
"tagId":1722,"name":"good service","label":"Good Service"
},
{
"tagId":3707,"name":"bad service","label":"Bad Service"
}
]};
I am just learning Angular js and the project I am working on will need the check boxes in the following format.
Name
[ ] Employee Name
Service
[ ] Good Service
[ ] Bad Service
The JSON is loaded on startup with ajax in my main controller. I am not quite sure how let Angular build this for me using the ng-repeat function.
Any help is appreciated.
Check out my fiddle. I belive my answer is a bit more complete than Khalil's.
http://jsfiddle.net/nicolasmoise/8YQPh/1
I have created a factory .factory('checkBoxFactory', function(){}) which takes the JSON object and adds a check="false" to every tag. This may not be necessary, but I believe it's better to set the values right away in case the user doesn't touch them.
Finally, I have directive .directive('checkboxes', function(){}) which takes the checkboxes I have created through the factory and creates the desired markup. With this you can change the name of your categories (Name, Service) and it still works.
Let me know if this is not what you had in mind or if you have questions.
I made a jsfiddle of the most basic example of what you're looking for over here.
Basically I just attached data to the scope and iterated over both lists, "Service" and "Name" and used inputs with type=checkbox(angular docs) and attached an ng-model linked to a check value on each object (this will be added by angular when you activate the checkbox).
You can monitor the values of the checkboxes by referencing check on each object. I do this by doing ng-repeat="service in data.Service" and then calling service.check.
I have a dijit Select widget and need to do something when the user clicks one of the dropdown items. Meaning I need access to the clicked item, to retrive some information, and call one of my own functions.
I've tested to attach an onChange on the select and I can get the text value selected fine. But I need the object and not the value. The object holds more values in a data-info-attribute.
Basically what I'm trying to achieve is to show one value in the list but send along more values to populate other fields when selected.
Background: This is a typeahead field populated thru AJAX by a server function. There IS a store attached but it's empty (as far as I can tell) so I've been unsuccessful trying with: .store.fetchItemByIdentity - always returns nothing.
ta.store.fetchItemByIdentity({
identity: ta.getValue(),
onItem: function(item, request){
console.log(item),
console.log(request)
}
})
I expect the log to show item- and request-object, but they're both undefined.
ta.getValue() get's the selected value as expected.
What's the best way to achieve this?
Have a look at my answer to onChange not sufficient to trigger query from Dojo Combobox and also to jsFiddle mentioned there. I added code specific for your needs there:
select.dropDown.on("itemClick", function(dijit, event) {
var node = dijit.domNode;
console.log(domAttr.get(node, "data-info-attribute"));
// or
console.log(node.dataset.infoAttribute);
});