I have a list of items and I want to show them in a table and I have a button and whenever a user click on that the array would be updated and the table should update after that.
Here is a codes link of my code :
link to code
here is my code as well:
var app=angular.module('app',[]);
app.controller('table',function($scope){
alert("ddd");
$scope.typesHash=[{name : 'sugar', price : 1,unit:1 },
{name : 'lemon', price : 100,unit:2.5 }];
$scope.addTable=function(){
var arr={name : 'meat', price : 200,unit:3.3 };
$scope.typesHash.add(arr);
}
});
When the code loads for the first time table gets updated but when I click on the button nothing happens!!!
Can anyone help how I can do that?
You need to actually call the function clickTable, your expression was incorrect. AND you need to remove the extra controller:
<div id="clcikbtn" style="background-color:black;width:20px;height:20px;" ng-click="addTable" ng-controller="table"></div>
Should be:
<div id="clcikbtn" style="background-color:black;width:20px;height:20px;" ng-click="addTable()"></div>
Finally, change 'add' to 'push' in addTable function:
$scope.typesHash.push(arr);
Updated plunkr:
http://plnkr.co/edit/un81F5wpnvHr6zNtlFzL?p=preview
Related
I am working on new angular 6 application and i am new to angular 6.
I have to implement the new function like.i am having one html table with multiple column some of them have checkbox along with id in hiddenfield. Now i have one button which is outside html table.
Now on the hutton click i have to get selected rows of one checkbox column. I have tried to search same on google but not getting any good solution for this.
Can anyone help to achive these functionality.
Thanks in advance.
Omkar
you can do this stuff without the need of button by following :
checkbox :
<input type='checkbox' ng-repeat="fruit in fruits"
ng-checked="checkedFruits.indexOf(fruit) != -1" ng-click="toggleCheck(fruit)">
the function get called :
function SomeCtrl ($scope) {
$scope.fruits = ["apple, orange, pear, naartjie"];
$scope.checkedFruits = [];
$scope.toggleCheck = function (fruit) {
if ($scope.checkedFruits.indexOf(fruit) === -1) {
$scope.checkedFruits.push(fruit);
} else {
$scope.checkedFruits.splice($scope.checkedFruits.indexOf(fruit), 1);
}
};
}
I have a JSON text and three dropdown lists.
First dropdown list will be populating Entities (Applicant, Person, Plan).
Second dropdown list will be populating Association Types of selected Entity from previous selection.
(Here ‘Person’ and ‘Plan’ will be rendered by selecting “Applicant” as Entity)
The third dropdown list should populate the Attribute values. (Based on selection of Association Type from the second dropdown list, it should display the attributes of respective Entity)
Example: If I select Person Association type in 2nd dropdown list then Attributes of Person Entity has to be displayed.
I have tried solving this problem.
I could get the values for the first two dropdown lists. I have tried rendering the values however I am facing some problems.
Can someone help me how to get the values??
http://jsbin.com/toqisibumo/edit?html,js,output
If you dont understand question, Please dont hesitate to ask. Thanks
Hope this solve your issue.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model="dd1" ng-options="item.Entity for item in data">
</select>
<select ng-model="dd2" ng-options="ass.associationType for ass in dd1.Associations" ng-change="loadDD3()">
</select>
<select ng-model="dd3" ng-options="atr.name for atr in dataDD3">
</select>
</body>
<script>
var angular = angular.module('myApp', []);
angular.controller('myCtrl', function($scope,$http) {
$scope.data = [
{
"Attributes":[
{"name":"CSRPercent","attributeType":"decimal"},
{"name":"date","attributeType":"date"},
{"name":"hoursPerWeek","attributeType":"long"},
{"name":"householdSize","attributeType":"long"},
{"name":"income","attributeType":"decimal"},
{"name":"incomePeriod","attributeType":"string"},
{"name":"isEligibleForCostSharingReduction","attributeType":"boolean"},
{"name":"isEligibleForIncomeBasedMedi_CAL","attributeType":"boolean"},
{"name":"isEligibleForMedi_Cal_Access","attributeType":"boolean"},
{"name":"isEligibleForPremiumAssistance","attributeType":"boolean"},
{"name":"state","attributeType":"string"},
{"name":"zip","attributeType":"string"}
],
"Associations":[
{"associationType":"Person","name":"familyMembers"},
{"associationType":"Plan","name":"plans"}
],
"Entity":"Applicant"
},
{
"Attributes":[
{"name":"age","attributeType":"long"},
{"name":"isPregnant","attributeType":"boolean"}
],
"Entity":"Person"
},
{
"Attributes":[
{"name":"company","attributeType":"string"},
{"name":"costPerPerson","attributeType":"decimal"},
{"name":"name","attributeType":"string"},
{"name":"premiumAssistance","attributeType":"decimal"},
{"name":"stars","attributeType":"long"},
{"name":"totalMonthlyPremium","attributeType":"decimal"},
{"name":"yourMonthlyPremium","attributeType":"decimal"}
],
"Entity":"Plan"
}
];
$scope.dataDD2 = [];
$scope.loadDD3=function(){
for(var i = 0; i < $scope.data.length; i++) {
var obj = $scope.data[i];
if(obj.Entity == $scope.dd2.associationType)
{
$scope.dataDD3 = obj.Attributes;
}
}
};
});
</script>
</html>
But still I have some issues.
For the dropdown1 you have three values(Applicant, Person, Plan).
If you select Applicant you will load Associations(Person, Plan) to the dropdown2.
What if you select either Person or Plan in dropdown1 ?
For those two you don't have associations ryt.
First of all, we can't test your jsbin, because the get request fails (ERR_NAME_NOT_RESOLVED)
Secondly, I see this line of code:
<select ng-model="z" ng-change="addAttributes()" ng-options="sel.name for sel in z.Attributes">
You've set the ng-model to 'z', and then try to get the options from 'z.Attribute', but your 'z' model is not populated with anything. Maybe you wanted to make y.Attributes ?
UPDATE:
I think you are having troubles with your JSON data.
here's an updated link.
Select Applicant -> Person -> FamilyMembers
is this the behaviour you want?
If so, look how I've modified your select:
<select ng-model="z" ng-change="addAttributes()" ng-options="color.name for color in y.names">
and this is how I've modified your JSON data:
...
"Associations":[{"associationType":"Person","names":[{"name" : "familyMembers"}]}
...
so names is an array containing your values.
I checked your codes.
In the third drop-down your loading the data from
sel.name for sel in z.Attributes
Where it has to be
sel.name for sel in x.Attributes
Then you will get the dropdown
So, i'm quite stuck at this:
I have quite many buttons on my page, each button's availability is different in different context, for example:
When button "Add" is pressed, its state will be "disabled", Cancel and Save buttons will be available.
I came up with a solution to manage the stage of every buttons in one object call state, like this:
// This is the Controller
$scope.some_id = false;
// With some UI interaction, $scope.some_id will be some integer value
$scope.getContextBtnAdd = function(){ return $scope.some_id; };
$scope.getContextBtnCancel = function(){ return !$scope.getContextBtnAdd(); };
$scope.state = {
contextBtns : {
btnAdd : $scope.getContextBtnAdd(),
btnCancel: $scope.getContextBtnCancel(),
},
footerBtns : { Some footer buttons }
};
// This is the View
<button name="add" ng-disabled="!state.contextBtns.btnAdd">Add</button>
"So when there is no product load, $scope.some_id will be false, so Add button will be available, but when user clicks on some products, the $scope.some_id will be some integer value like 4,7 or 100... and the button will be disabled. " <=== That's what i want. But actually it doesn't work, the some_id changes but maybe the getContext function is never called. Right now i have to pass the getContext function to ng-disabled like this:
<button name="add" ng-disabled="!getContextBtnAdd()">Add</button>
But i want to manage them all via one object. So what's is my code problem and is there any better way to manage button, input....s availabilities?
Thank you!
When that line is executed:
$scope.state = {
contextBtns : {
btnAdd : $scope.getContextBtnAdd(),
btnCancel: $scope.getContextBtnCancel(),
},
footerBtns : { Some footer buttons }
};
the state object is created, and its contextBtns.btnAdd attribute (for example) takes the value returned by $scope.getContextBtnAdd() at that time. The attribute value never changes after.
What you want instead is something that always has the value of $scope.getContextBtnAdd() every time it's evaluated. So you simply need the function itself:
$scope.state = {
contextBtns : {
btnAdd : $scope.getContextBtnAdd,
btnCancel: $scope.getContextBtnCancel,
},
footerBtns : { Some footer buttons }
};
and in the view:
<button name="add" ng-disabled="!state.contextBtns.btnAdd()">Add</button>
I have successfully created a function to toggle the individual rows of my ng-table to open and close using:
TestCase.prototype.toggle = function() {
this.showMe = !this.showMe;
}
and
<tr ng-repeat="row in $data">
<td align="left">
<p ng-click="row.toggle();">{{row.description}}</p>
<div ng-show="row.showMe">
See the plunkr for more code, note the expand/collapse buttons are in the "menu".
However, I can't figure out a way to now toggle ALL of the rows on and off. I want to be able to somehow run a for loop over the rows and then call toggle if needed, however my attempts at doing so have failed. See them below:
TestCase.prototype.expandAllAttemptOne = function() {
for (var row in this) {
if (!row.showMe)
row.showMe = !row.showMe;
}
}
function expandAllAttemptOneTwo(data) {
for (var i in data) {
if (!data[i].showMe)
data[i].showMe = !data[i].showMe;
}
}
Any ideas on how to properly toggle all rows on/off?
Using the ng-show directive in combination with the ng-click and ng-init directives, we can do something like this:
<div ng-controller="TableController">
<button ng-click="setVisible(true)">Show All</button>
<button ng-click="setVisible(false)">Hide All</button>
<ul>
<li ng-repeat="person in persons"
ng-click="person.visible = !person.visible"
ng-show="person.visible">
{{person.name}}
</li>
</ul>
</div>
Our controller might then look like this:
myApp.controller('TableController', function ($scope) {
$scope.persons = [
{ name: "John", visible : true},
{ name: "Jill", visible : true},
{ name: "Sue", visible : true},
{ name: "Jackson", visible : true}
];
$scope.setVisible = function (visible) {
angular.forEach($scope.persons, function (person) {
person.visible = visible;
});
}
});
We are doing a couple things here. First, our controller contains an array of person objects. Each one of these objects has a property named visible. We'll use this to toggle items on and off. Second, we define a function in our controller named setVisible. This takes a boolean value as an argument, and will iterate over the entire persons array and set each person object's visible property to that value.
Now, in our html, we are using three angular directives; ng-click, ng-repeat, and ng-show. It seems like you already kinda know how these work, so I'll just explain what I'm doing with them instead. In our html we use ng-click to set up our click event handler for our "Show All" and "Hide All" buttons. Clicking either of these will cause setVisible to be called with a value of either true or false. This will take care of toggling all of our list items either all on, or all off.
Next, in our ng-repeat directive, we provide an expression for angular to evaluate when a list item is clicked. In this case, we tell angular to toggle person.visible to the opposite value that it is currently. This effectively will hide a list item. And finally, we have our ng-show directive, which is simply used in conjunction with our visible property to determine whether or not to render a particular list item.
Here is a plnkr with a working example: http://plnkr.co/edit/MlxyvfDo0jZVTkK0gman?p=preview
This code is a general example of something you might do, you should be able to expand upon it to fit your particular need. Hope this help!
I wasn't sure how to describe my question in the question title. But here is my problem:
(a) When I double click on a row in an Ext.grid.Panel, I open a modal window with it's relavant details to update the record.
(b) After I make the needed modifications and close the modal window, I want to return to the Grid with the Grid filtered on a certain code i.e selectedSalesOrderNum.
jobSlotsGrid.on('celldblclick', function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts){
modalStatus = loadWindow();
jobSlotStore.filterBy(function(rec) {
alert('Filtering data');
return rec.get('salesOrderNum') === selectedSalesOrderNum;
});
});
(c) Below is the function, which creates the model window. It also has the call to method submitCreateJobSlotHandler() which basically saves the changes and reloads the original Grid with all the data. ( Hence the necessity to filter it back with a certain code i.e selectedSalesOrderNum ).
function loadWindow()
{
getAllTabsForEditJobSlot();
var createJobSlotWin = new Ext.Window({
id:'salesOrder-win-jobSlot',
applyTo : 'hello-win',
modal : true,
layout : 'fit',
width : 900,
height : 500,
closeAction :'destroy',
plain : true,
model : true,
stateful : false,
title :'Create Job Slot',
items : [editJobSlotInformationPanel],
buttons : [{
text : 'Save',
handler : function(){
submitCreateJobSlotHandler();
//createJobSlotWin.destroy();
}
},{
text : 'Close',
handler : function(){
createJobSlotWin.destroy();
}
}]
});
createJobSlotWin.show();
}
The Issue:
In the first block of code, as soon as the loadWindow method is called, both a modal window is popped up along with the filterBy code getting executed in parallel and showing up the alerts ( 'Filtering data' ). I then enter the data in the modal and save. So, basically, the filtering is not done after the Save/Close on Modal. The code ( if/else ) is immediately reached after loading the modal window. It is as if, the modal window opens and goes to the next line of code while waiting for the user to perform some action on the modal window later.
Hope I am clear on my question. Could anyone please advice how do I handle this?
EDIT:
The more I think about it now, I guess the loadWindow() method just creates the Modal Window as we just have a new Ext.Window() call and doesn't bother about other user actions inside the modal and returns the control. And hence, executes the subsequent filterBy event immediately. In that case, I want to filter the store after I am reloading the store upon the Save in Modal Window. The save on Modal window has this handler code:
function submitCreateJobSlotHandler () {
alert('Into Submit');
var formPanel = Ext.getCmp('salesOrderJobSlotForm');
formPanel.getForm().submit({
url : 'someUrl',
method : 'POST',
success : function() {
alert('Success');
jobSlotStore.load({
scope : this,
url : 'salesOrderJobSlot/listJSON'
});
jobSlotStore.filterBy(function(rec) {
alert(rec.get('salesOrderNum')+"--"+selectedSalesOrderNum)
return rec.get('salesOrderNum') === selectedSalesOrderNum;
});
},
failure : function() {
alert('PSO save failed!');
}
});
}
But the issue here is, the jobSlotStore.load() though gets called, it holds until the filterBy gets executed. Because, I see the alerts coming up one by one and then after all the alerts are done, the store loads. So, the filterBy gets overriden by the 'late' store load.
Any suggestions to deal with the issue in any of the ways?
The store load is asynchronous, you need to wait til it completes before you can filter the data set on the client:
store.on('load', function() {
store.filter();
}, null, {single: true});
store.load();