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
Related
I have radio button group in my angular page. Below is my code,
<span ng-repeat="radioButtonItem in radioButtonItem.Values">
<label class="radio-inline">
<input type="radio"
name="radioButtonName"
value="{{radioButtonItem.Id}}"
ng-model="radioButtonItem.SelectedValues"
ng-change="changeRadioButton()" />
{{radioButtonItem.Value}}
</label>
</span>
Ex :
Radio button 1 : .Male .Female
Radio button 2 : .ax .sy
Radio button 3 : .c .v
when i select the first group radio button say male and select the second group radio button say ax first
one is deselect(male). How to retain the values in radio button group?
Because your name is same for all the groups. Generate it dynamically too.
Here is how you could do it. I have attached an example too.
<input type="radio"
name="{{radioButtonItem.groupName}}"
value="{{radioButtonItem.Id}}"
ng-model="radioButtonItem.SelectedValues"
ng-change="changeRadioButton()"/>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.cell = {
evaluator: "Guava2"
};
$scope.cell1 = {
evaluator: "Apple1"
};
$scope.evaluators = [{
name: "Guava1",
groupName: "guava"
}, {
name: "Guava2",
groupName: "guava"
}];
$scope.evaluators1 = [{
name: "Apple1",
groupName: "peachy"
}, {
name: "Peach2",
groupName: "peachy"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<div>Which one?</div>
<label class="radio" ng-repeat="eval in evaluators">
<input type="radio" ng-model="cell.evaluator" name="{{eval.groupName}}" value="{{eval.name}}">{{eval.name}}
</label>
<hr />
<div>You picked: {{cell.evaluator}}</div>
<br/>
<label class="radio" ng-repeat="eval in evaluators1">
<input type="radio" ng-model="cell1.evaluator" name="{{eval.groupName}}" value="{{eval.name}}">{{eval.name}}
</label>
<div>You picked: {{cell1.evaluator}}</div>
</div>
</div>
</body>
</html>
I am trying to add a form to a bootstrap accordion and post a text value. Without accordion the form works alright. When i added the form to the accordion i am not able to pass text box value to angularjs controller. Basically i am not able to perform the CRUD operations as i am not able to pass the values. Minimum code related to the issue.
main.html
<div ng-controller="myController">
<accordion class="accordion" close-others="oneAtATime">
<accordion-group ng-repeat="group in groups" is-open="status.isOpen[$index]" >
<accordion-heading>
{{group.groupTitle}} <i class="fa chevron-icon" ng-class="{'fa-chevron-down': status.isOpen[$index], 'fa-chevron-right': !status.isOpen[$index]}"></i>
</accordion-heading>
<div ng-include="group.templateUrl"></div>
</accordion-group>
</accordion>
</div>
controller.js
App.controller('myController', ['$scope', 'Parts', function($scope, Parts) {
var original = $scope.parts;
$scope.submit = function() {
if ($scope.parts.a_id == null) {
$scope.createNewPart();
} else {
$scope.updatePart();
}
};
$scope.createNewPart = function() {
Parts.resource1.create($scope.parts);
};
$scope.updatePart = function() {
Parts.resource2.update($scope.parts)
};
$scope.oneAtATime = true;
$scope.groups = [{
groupTitle: "ADD 1",
templateUrl: "file1.html"
}, {
groupTitle: "ADD 2",
templateUrl: "file2.html"
}];
$scope.status = {
isOpen: new Array($scope.groups.length)
};
for (var i = 0; i < $scope.status.isOpen.length; i++) {
$scope.status.isOpen[i] = (i === 0);
}
} ]);
file1.html
<div>
<form name="myForm" ng-submit="submit()">
<div class="row">
<label class="col-md-2 control-lable" for="part">Add1</label>
<input type="text" ng-model="parts.part" id="part" required />
</div>
<div class="row">
<input type="submit" value="{{!parts.id ? 'Add' : 'Update'}}" ng-disabled="myForm.$invalid">
</div>
</form>
//inside table
<tr ng-repeat="a in availableparts >
<td>{{a.id}}</td>
<td>{{a.apart}}</td>
<td><button type="button" ng-click="editPart(a.id)" >Edit</button>
<button type="button" ng-click="deletePart(a.id)">Remove</button>
</td>
</tr>
</div>
Initially, you need to set $scope.parts to empty object {}, so when you access $scope.parts.id you will have null, instead of error saying id of undefined
I'm trying to get the radio value button value from ng-dialog but it always got undefined.
Here is the dialog template:
<script type="text/ng-template" id="flag-reasons.html">
<div style="padding:10px;">
<span>
What's wrong ?
</span>
<div class="form-group" ng-repeat="flagreason in flagreasons">
<input type="radio" ng-model="fr" name="frname" value="{{flagreason.id}}"> {{flagreason.title}}
</div>
<div class="form-group">
<button type="button" ng-click="validFlag()">
Valider
</button>
</div>
</div>
</script>
Here is the partial js where I start with the dialog:
$scope.openFlag = function(){
$scope.dialog = ngDialog.open({ template: 'flag-reasons.html',
className: 'ngdialog-theme-default', scope: $scope });
$scope.validFlag = function(){
console.log($scope.fr);
}
}
I have tried ng-value as below:
<input type="radio" ng-model="fr" name="frname" ng-value="flagreason.id"> {{flagreason.title}}
but it still got undefined
Notice that it works when I directly set the value of the radio button like:
<input type="radio" ng-model="fr" name="frname" value="5"> {{flagreason.title}}
The issue is with ngmodel that's not getting update. You have to initialise ngmodel first in the template.
flag-reasons.html
<script type="text/ng-template" id="flag-reasons.html">
<div style="padding:10px;">
<span>
What's wrong ?
</span>
<div class="form-group" ng-repeat="flagreason in flagreasons">
<input type="radio" ng-model="cb.fr" name="frname" value="{{flagreason.id}}">{{flagreason.id}} - {{flagreason.title}}
</div>
<div class="form-group">
<button type="button" ng-click="validFlag()">
Valider
</button>
</div>
</div>
</script>
Controller
angular.module("app", ['ngDialog'])
.controller('Ctrl',function ($scope, ngDialog) {
'use strict';
$scope.cb = {};
$scope.flagreasons = [
{id: 1, title: 'title1'},
{id: 2, title: 'title2'},
{id: 3, title: 'title3'}
];
$scope.openFlag = function(){
$scope.dialog = ngDialog.open({ template: 'flag-reasons.html',
className: 'ngdialog-theme-default', scope: $scope });
$scope.validFlag = function(){
console.log($scope.fr);
}
}
$scope.$watch('cb.fr', function (v) {
console.log(v);
});
});
Working Fiddle: JSFiddle
<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;
},
}
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)