<div data-ng-controller="OfficeController" class="container">
<div class="row col-md-12" style="margin:10px;">
<form name="Office">
<div class="col-sm-12">
<label for="Name" class="form-group col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="text" class="form-group col-xs-6" id="Name" placeholder="Name" ng-model="Name" required />
</div>
<label for="Org_ID" class="form-group col-sm-2 control-label">Org_ID</label>
<div class="col-sm-4">
<input type="text" class="form-group col-xs-6" id="Org_ID" placeholder="Org_ID" ng-model="Org_ID" required />
</div>
</div>
</form>
</div>
</div>
i have two textboxes in view
adding button to uigrid column for get row data and call get
$scope.gridOptions = {
data: 'Offices',
columnDefs: [
{ field: 'OFFICE_ID', displayName: 'OFFICE_ID' },
{ field: 'Name', displayName: 'Name' },
{ field: 'Org_ID', displayName: 'Org_ID' },
{
name: 'ShowScope',
cellTemplate: '<button class="btn primary" ng-click="grid.appScope.get(row)">Click Me</button>'
}
],
filterOptions: { filterText: '', useExternalFilter: false },
showFilter: true,
enableFiltering: true,
showGridFooter: true,
};
alert(res.Name) shows me correct name but i am unable to set textbox name value??
$scope.get = function (row) {
alert(row.entity.OFFICE_ID);
var promiseGetSingle = OfficeService.get(row.entity.OFFICE_ID);
promiseGetSingle.then(function (pl) {
var res = pl.data;
alert(res.Name);
$scope.OFFICE_ID = res.OFFICE_ID;
$scope.Org_ID = res.Org_ID;
$scope.Name = res.Name;
$scope.IsNewRecord = 0;
},
function (errorPl) {
console.log('failure loading Organization', errorPl);
});
}
Any idea how to set textbox value through scope,ir any method, what i want is when users click on row button i want to poulate fields by getting data from that particular row...in UI Grid Angularjs
Please try as shown below.
$scope.Name='';//define the variable globally
$scope.get = function (row) {
var promiseGetSingle = OfficeService.get(row.entity.OFFICE_ID);
promiseGetSingle.then(function (pl) {
$scope.Name = res.Name;
},
}
Related
I have a select option and file upload control. The default value of dropdown is set to select. I have a file upload control, where on load the upload button should be disabled/hidden and when user selects an item other than select in dropdown the upload button should be enabled, and a custom message should be shown about the option selected in dropdown. I have tried the below, but seems to be an issue. In index.html
<body ng-controller="Main as vm">
<div class="container">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">Select Environment :<em style="color:red">*</em></label>
</div>
<div class="col-sm-4 form-group">
<select name="mySelect" id="mySelect" class="dropdown form-control cl-sm-6" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption" ng-change="selectEnvironmentChanged()" ></select>
</div>
<label ng-show="vm.showWarning">Warning message</label>
<label ng-show="vm.showEnvironmentMessage">You have selected </label>
</div>
<div class="row">
<div class="form-group" >
<label for="newfiles">Select and upload files</label>
<input type="file" id="imageUploadfile" class="uploadFile" accept="image/*" my-files="files" ngf-multiple="false" />
</div>
<div class="col-sm-4 form-group">
<input class="btn btn-primary" type="button" ng-if="showBtns" ng-show="showUpload" ng-click="uploadNewFiles()" value="upload" />
</div>
</div>
</div>
In the controller page, I have code as
(function () {
'use strict';
var myApp = angular.module('app',[]);
myApp.controller('Main', function ($scope) {
$scope.showUpload = false;
$scope.data = {
availableOptions: [
{ id: '1', name: 'Select' },
{ id: '2', name: 'aY1' },
{ id: '3', name: 'aY3' },
{ id: '4', name: 'bA4' }
],
selectedOption: { id: '1', name: 'Select' }
};
$scope.selectEnvironmentChanged = function () {
if ($scope.data.selectedOption !== 'Select') {
vm.showWarning = true;
$scope.showUpload = true;
vm.showEnvironmentMessage = true;
} else {
vm.showWarning = false;
vm.showEnvironmentMessage = false;
$scope.showUpload = false;
}
};
Currently onload of the page the upload button is hidden, but if I select any other item in dropdown the upload button is not showing. Also, I want to show in the "showEnvironmentMessage" as You have selected Option 1, if the user selects ay1, if they choose ay2, then show message as you have selected option 2 in the "showEnvironmentMessage"label.
How to achieve this? Thanks
I have one form and am getting values for this form ,from loadEditLevDetails function.
I have binded all the field values except leave type field,I don't knwo how to bind it.
One more thing when I click edit button I can able to change the field values and I can choose some other drop down option,for that I am loading data from getLeaveTypeList method.Based on selected option available leaves field will be auto populated.
<body ng-app="intranet_App" ng-controller="myCtrl" ng-init="init()">
<div class="container">
<form id="row editLeaveDetails" ng-repeat="data in leaveDetails">
<div>
<label>Leave Applied On</label>
<input type="text" name="" ng-model="data.From | date : 'dd/MM/yyyy' ">
</div>
<div>
<label>Leave Type</label>
<select type="text" name="" class="col-xs-12 form-control rField" id="levType" ng-model="data.Leave_type_id" ng-blur="leaveBalance(data.Leave_type_id)"><option value="" selected="selected">Select</option><option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option></select>
</div>
<div>
<label>Availabe Leaves</label>
<input type="text" name="" id="levTaken" >
</div>
<div>
<label>Date From</label>
<input type="text" id="levFrom" onfocus="(this.type='date')" ng-model="data.From | date : 'dd/MM/yyyy' ">
</div>
<div>
<label>Date To</label>
<input type="text" id="levTo" onfocus="(this.type='date')" ng-model="data.To | date : 'dd/MM/yyyy'" >
</div>
<div>
<label>Duration</label>
<input type="text" id="levDuration" ng-model="data.Duration">
</div>
<div>
<label>Reason</label>
<textarea id="LevReason" ng-model="data.Note"></textarea>
</div>
<div class="row pull-right ">
<button class="btn btn-warning editLevDetails btnLeft" ng-click="editDetails()" ng-if="!editMode">Edit</button>
</div>
</form>
</div>
</body>
<script>
var app=angular
.module('intranet_App', [])
.controller('myCtrl', function ($scope, $http) {
$scope.editMode = false;
$scope.init = function () {
$scope.loadLeaves();
$http.post("/leave/getLeaveTypeList").then(function (response) {
$scope.leaveTypes = response.data;
})
}
$scope.loadEditLevDetails = function (id) {
$scope.Id = { leaveRequestId: id };
console.log($scope.Id)
var requestHeaders = {
'content-type': 'application/json'
}
var httpRequest = {
method: 'post',
url: "/leave/editLeaveRequest",
headers: requestHeaders,
data: $scope.Id
}
$http(httpRequest).then(function (response) {
$scope.leaveDetails = response.data;
console.log($scope.leaveDetails)
})
}
$scope.leaveBalance = function (selectedvalue) {
$scope.leaveTypeId = { leaveTypeId: selectedvalue };
var requestHeaders = {
"content-type": 'application/json'
}
var httpRequest = {
method: 'POST',
url: '/leave/getLeaveBalenceCount',
headers: requestHeaders,
data: $scope.leaveTypeId
}
$http(httpRequest).then(function (response) {
$scope.noOfValues = response.data;
$scope.balanceCount = $scope.noOfValues[0].balance_count;
})
}
})
</script>
Please let me know anyone,how to display selected option in dropdown? This is my leaveTypes json.
Try use ng-options directive.
<select ng-model="data.Leave_type_id"
ng-options="leaveType.id as leaveType.name for leaveType in leaveTypes">
<option>Select</option>
</select>
There are two ways you can achieve this :
1. You can add a property name as selected in each object and mark one of them is true which you want to pre-populated in the dropdown.
DEMO
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.leaveTypes = [{
id: 1,
Name: 'Casual Leave',
Selected: false
}, {
id: 2,
Name: 'National Leave',
Selected: true
}, {
id: 3,
Name: 'Regional Leave',
Selected: false
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<label>Leave Type</label>
<select type="text" name="" class="col-xs-12 form-control rField" id="levType">
<option value="0">Select</option>
<option data-ng-repeat="data in leaveTypes" value="{{data.id}}" ng-selected="{{ data.Selected == true }}">{{data.Name}}</option>
</select>
</div>
You can assign a selected value into the ng-model of the select element.
DEMO
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.leaveTypes = [{
"id": "1",
Name: 'Casual Leave'
}, {
"id": "2",
Name: 'National Leave'
}, {
"id": "3",
Name: 'Regional Leave'
}];
$scope.selected = {"id": "2"};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<label>Leave Type</label>
<select type="text" name="" class="col-xs-12 form-control rField" id="levType" ng-model="selected.id">
<option value="0">Select</option>
<option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option>
</select>
</div>
I am using kendo-ui with AngularJS. I have a parent grid and on the expansion of the row I have to show two sub grids, for that I don't want to call server separately. I have developed a service which returns data of both grids, now I want to bind the data to the grid. How to do that? Here is the code:
$scope.mainGridOptions = {
columns: [
{ field: "id", title:"ID",width: "50px" },
{ field: "name", title:"Name", width:"200px" },
],
dataSource: {
transport: {
read: function (e) {
var params = {};
var dataObj = ServerAPIs.getStudents(params, function(){
e.success(dataObj.result);
},function(){
alert('something went wrong');
});
}
},
pageSize: 20,
},
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
filterable: true,
reorderable: true,
resizable: true,
detailInit: function(e) {
(function(e){
var params = {
"student-id" : e.data.id
};
var dataObj = ServerAPIs.getStudentDetails(params, function(data){
if(data.result.dataset1.length > 0){
//what to do here? how to access child grid1?
}
if(data.result.dataset2.length > 0){
//what to do here? how to access child grid2?
}
},function(){
alert('something went wrong');
});
})(e);
}
};
Here is the html:
<kendo-grid id='maingrid' options="mainGridOptions">
<div k-detail-template >
<div class='grid_loader'>
<br/>
<span class="spinner_forms"> </span>
<br/>
</div>
<div class='details' style='display:none'>
<div class="center-block" style="width: 800px;" kendo-grid k-options="grid1Options(dataItem)"></div>
<br />
<div class="center-block" style="width: 800px;" kendo-grid k-options="grid2Options(dataItem)"></div>
</div>
</div>
In Javascript, I selected child element using find method and initiated the grid.
detailInit: function(e) {
(function(e){
var params = {
"student-id" : e.data.id
};
var dataObj = ServerAPIs.getStudentDetails(params, function(data){
if(data.result.dataset1.length > 0){
e.detailRow.find(".child-grid-1").kendoGrid({
dataSource: {
data: data.result.dataset1,
},
columns: [//your columns here],
//other grid options
});
}
if(data.result.dataset2.length > 0){
e.detailRow.find(".child-grid-2").kendoGrid({
dataSource: {
data: data.result.dataset2,
},
columns: [//your columns here],
//other grid options
});
}
},function(){
alert('something went wrong');
});
})(e);
}
In html page, following modification needs to be made:
<kendo-grid id='maingrid' options="mainGridOptions">
<div k-detail-template >
<div class='grid_loader'>
<br/>
<span class="spinner_forms"> </span>
<br/>
</div>
<div class='details' style='display:none'>
<div class="child-grid-1" style="width: 800px;"></div>
<br />
<div class="child-grid-2" style="width: 800px;"></div>
</div>
</div>
I'm trying to add one button for adding values to ngmodel of kendo's multi select:
<div ng-controller="MyCtrl">
<select id='my' kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds"></select>
<p ng-show="selectedIds.length">Selected: {{ selectedIds }}</p>
<button ng-click="addSelectedId()">Add selected id</button>
<input ng-model="enteredId" />
</div>
Here is controller
function MyCtrl($scope) {
$scope.selectOptions = {
placeholder: "Select products...",
dataTextField: "ProductName",
dataValueField: "ProductID",
autoBind: false,
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
}
};
$scope.selectedIds = [ 4, 7];
$scope.addSelectedId = function() {
$scope.selectedIds.push(parseInt($scope.enteredId));
console.log($scope.selectedIds);
};
}
Plunker is here:
http://plnkr.co/edit/EH0EaMhFsV2JTdwpkqGg?p=preview
When added to selectedIds, nothing gets added to dropdown select placeholder. Any ideas?
You need to add k-rebind="selectedIds" in your html code
HTML:
<div ng-controller="MyCtrl">
<select id='my' kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds" k-rebind="selectedIds"></select>
<p ng-show="selectedIds.length">Selected: {{ selectedIds }}</p>
<button ng-click="addSelectedId()">Add selected id</button>
<input ng-model="enteredId" />
</div>
Please see this updated plunker example
i have to create a form using content editor web part in SharePoint 2010. I have to hide some item or div based on group permission (example: admin,user) using angularjs.
There have two ways to solve your problem:
You receive all the data and you display it or not based on the current role, helped by a display function. jsFiddle1
Javascript code:
var demoApp = angular.module('demoApp', []);
demoApp.controller('PermissionsForm', function ($scope) {
// Mock data. You must receive it from your server
$scope.mockData = {
field1: {
value: 'field1 value',
roles: ['admin','user']
},
field2: {
value: 'field2 value',
roles: ['admin']
},
field3: {
value: 'field3 value',
roles: ['admin','user']
},
role: 'user'
};
$scope.displayField = function(fieldName){
var foundRole = false;
angular.forEach($scope.mockData[fieldName].roles, function(value, key) {
if (value == $scope.mockData.role){
foundRole = true;
}
});
return foundRole;
};
});
HTML code:
<div data-ng-app="demoApp" data-ng-controller="PermissionsForm" class="main">
<form>
<div ng-if="displayField('field1')">
<label for="field1">Field 1</label>
<input id="field1" value="{{mockData.field1.value}}">
</div>
<div ng-if="displayField('field2')">
<label for="field2">Field 2</label>
<input id="field2"value="{{mockData.field2.value}}">
</div>
<div ng-if="displayField('field3')">
<label for="field3">Field 3</label>
<input id="field3" value="{{mockData.field3.value}}">
</div>
</form>
</div>
You receive only the data related to each roles/permission and you build your interface with the list of fields. This is the more secure way to hide info. jsFiddle2
Javascript code:
var demoApp = angular.module('demoApp', []);
demoApp.controller('PermissionsForm', function ($scope) {
// Mock data. You must receive it from your server
$scope.mockData = {
field1: {
value: 'field1 value'
},
field3: {
value: 'field3 value'
},
field4: {
value: 'field4 value'
}
};
$scope.displayField = function(fieldName){
if ( $scope.mockData[fieldName] == undefined )
return false;
return true;
};
});
HTML code:
<div data-ng-app="demoApp" data-ng-controller="PermissionsForm" class="main">
<form>
<div ng-if="displayField('field1')">
<label for="field1">Field 1</label>
<input id="field1" value="{{mockData.field1.value}}">
</div>
<div ng-if="displayField('field2')">
<label for="field2">Field 2</label>
<input id="field2"value="{{mockData.field2.value}}">
</div>
<div ng-if="displayField('field3')">
<label for="field3">Field 3</label>
<input id="field3" value="{{mockData.field3.value}}">
</div>
<div ng-if="displayField('field4')">
<label for="field4">Field 4</label>
<input id="field4" value="{{mockData.field4.value}}">
</div>
</form>
</div>
From a secure point of view, the second solution is the best, because your are not exposing the data in the client side (browser)