I am currently working on with a form that would get values from a json object. I'm done with it! (yey~) BUT when I POST the value I couldn't get anything. value="{{key}}" doesn't return a real data after POST. Any body can help me through solving this issue? Thanks alot!
<form class="form-horizontal" role="form" name="firewallForm" novalidate ng-init="firewallInit()">
<div class="form-group">
<label class="col-sm-1 control-label" for="firewallSource">Source</label>
<div class="col-sm-4 col-lg-2 col-md-2" ng-controller="entitiesController">
<select class="form-control input-medium" ng-model="firewallSource" ng-required="true">
<option value="" disabled selected> Enter Source Entity</option>
<option ng-repeat="(key, value) in entities.entities" value="{{key}}">{{key}}</option>
</select>
</div>
</div><div class="form-group">
<div class="col-sm-10">
<button type="button" class="btn btn-default" ng-click="submitFormFirewall()">
Submit
</button>
</div>
</div>
</form>
And my JS looks like:
$scope.submitFormFirewall = function() {
var postData = {};
postData["index"] = $scope.firewallRuleID;
postData["to"] = $scope.firewallDestination;
postData["application"] = $scope.firewallApplication;
postData["action"] = $scope.firewallAction;
postData["from"] = $scope.firewallSource;
Try this:
<select ng-model="firewallSource" ng-options="obj.key as obj.value for obj in entities.entities">
<option value=""> Enter Source Entity</option>
</select>
key and value are actually properties from your entities[0] object
Related
I want to pass data what user checked. My problem now.. it pass all..
This is my demo code and stackblitz
HTML
<div class="row" *ngFor="let item of modules; let i = index;">
<div class="col-md-1 align-center">{{i+1}}</div>
<div class="col-md-5">
<input type="text" class="form-control" [(ngModel)]="modules[i].module_name" value="{{modules[i].module_name}}" disabled>
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [checked]="modules[i].action.read" (change)="modules[i].action.read" name="access_{{modules[i].company_id}}" id="package-1">
<label for="package-1">Read</label>
</div>
<div class="col-md-2">
<input type="radio" [checked]="modules[i].action.write" (change)="modules[i].action.write" class="form-control" name="access_{{modules[i].company_id}}" id="package-2">
<label for="package-2">write</label>
</div>
<button (click)="test(item)">test</button>
</div>
Component
test(val){
console.log(val)
}
There are two issues mainly:
You need to create a unique id for both label and id attributes within the for-loop.
Next, create a method that will toggle the read/write property of each individual module. This ensures that if read is set then write will be false and vice versa.
.ts
toggleReadWrite(module: any, isRead: boolean) {
if (isRead) {
module.action.read = !module.action.read;
module.action.write = false;
} else {
module.action.write = !module.action.write;
module.action.read = false;
}
}
.html
<div class="row" *ngFor="let item of modules; let i = index;">
<div class="col-md-1 align-center">{{i+1}}</div>
<div class="col-md-5">
<input type="text" class="form-control" [(ngModel)]="modules[i].module_name"
value="{{modules[i].module_name}}" disabled>
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [checked]="modules[i].action.read"
(change)="toggleReadWrite(modules[i], true)"
name="access_{{modules[i].company_id}}" id="package+1+{{i}}">
<label for="package+1+{{i}}">Read</label>
</div>
<div class="col-md-2">
<input type="radio" [checked]="modules[i].action.write"
(change)="toggleReadWrite(modules[i], false)" class="form-control"
name="access_{{modules[i].company_id}}" id="package+2+{{i}}">
<label for="package+2+{{i}}">write</label>
</div>
<button (click)="test(item)">test</button>
</div>
First of all, you should make the id of radio buttons unique as you are looping through it.
id="package-1{{i}}"
<input type="radio" class="form-control" [checked]="modules[i].action.read" (change)="modules[i].action.read" name="access_{{modules[i].company_id}}"
id="package-1{{i}}">
<label for="package-1{{i}}">Read</label>
Also, I am not sure what is your desired output, please explain more.
I have a select box in that few values which is based on the selection i need to show the labels of the textbox.
ex: if you selected
the SE means I need to show the Location2 and Reporting To label box.
If you are selecting MANAger means need to show only Location2 label text
box only. And if you are selecting ADM/cluster, any one from this means need to be display only Location alone.
Js file
$scope.ChangeRole = function(id){
roleid=$scope.Role;
if(id=="2"){
// alert(id);
$scope.showreport =true;
$scope.showreportlocation=true;
$scope.showlocation = false;
}else if(id=="3"){
$scope.showreportlocation = true;
$scope.showreport = false;
$scope.showlocation = false;
}else{
$scope.showreport = false;
$scope.showreportlocation = false;
$scope.showlocation = true;
}
}
HTML file
<div class="col-lg-6">
<div class="form-group">
<label>Role<span style="color:red">*</span></label>
<div class="input-group role">
<select placeholder="Role" ng-model="Role" class="form-control pull-right" ng-change="ChangeRole(Role);" required ng-init="selectedType()" id="selectType"" name="role" required>
<option value="0">Role</option>
<option value="1">ADM</option>
<option value="2">SE</option>
<option value="3">MANA</option>
<option value="4">ClUSTER</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group" ng-show="showlocation">
<label>Location<span style="color:red">*</span></label>
<div class="input-group location">
<select id="LocationInput" class="form-control" ng-model="LocationId" ng-options="location.Id as location.NameoftheLocation for location in locations" required>
<option id="OptionInput" value="">Location</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-md-6" ng-show="showreportlocation">
<div class="form-group">
<label>Location2<span style="color:red">*</span></label>
<div class="input-group site">
<select data-placeholder="Location" style="width: 100%;" ui-select2="select2Options" class="form-group" multiple ng-model="selectedTags" required>
<option ng-repeat="tag in tags" value="{{tag.Id}}">{{tag.NameoftheLocation}}</option>
</select>
<div class="input-group-addon">
<i class="fa fa-map"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="otherType" ng-show="showreport">
<div class="form-group">
<label>Reporting To<span style="color:red">*</span></label>
<div class="input-group">
<select class="form-control" id="reportingto" name="reportingto" ng-options="n.Id as n.Name for n in names" ng-model="ReportingTo" required>
<option value="">Reporting To</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
Here I have given the required option for all but which is not allowing me to save because required is present.
Using ng-show for particular selection I hide that label, but while saving html will check that field also, which is wrong please let me know that how to do.
Please some make the fiddle and let me know,
Use ng-required instead and only require it when it is shown.
I also tested Casey's suggestion of using ng-if instead of ng-show and that works as well. https://plnkr.co/edit/eeKvz5zRFeuLSF6fDbuy?p=preview
Not able to add the selected value to the filter in angularjs im getting this error(Error: Unexpected token .)
Inside controller
$scope.search_type_options=[{name:"Name",value:"name"},{name:"Id",value:"id"},{name:"Update By",value:"updated_by"}];
$scope.search_val = function()
{
$scope.fs={$scope.search_type.value:$scope.search_txt};
$scope.filter_dt=$filter('filter')($scope.temp_data,$scope.fs);
}
I need output like
{name:"raj"}
Inside Template
<div class="form-group">
<select name="search_type" ng-model="search_type" ng-options="item as item.name for item in search_type_options">
<option value="">--select search type</option>
</select>
</div>
<div class="form-group">
<input type="text" ng-model="search_txt" class="form-control" placeholder="Search">
</div>
<button type="submit" ng-model="search_btn" ng-click="search_val()"class="btn btn-default">Go</button>
</div>
not sure if this is a correct js syntax
$scope.fs={$scope.search_type.value:$scope.search_txt};
normally it should be written like this
$scope.fs = {};
$scope.fs[$scope.search_type.value] = $scope.search_txt;
I have a form within my angular app (within SharePoint) that uses routing via hashbang, but when I click on a button in my form, it redirects to the root (like it can't resolve the URL so it uses the otherwise setting in my config), instead of executing the function.
Here is the HTML (my controller is defined in the routing):
<form name="newItem" class="form-horizontal" data-ng-submit="createItem()">
<fieldset>
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
({{70 - newItem.title.$viewValue.length}} Characters Remaining)
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
Your summary will be displayed as follows ({{500 - newItem.body.$viewValue.length}} Characters Remaining):<br /> {{itembody}}
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" data-ng-click="newItem">Submit</button>
</div>
</div>
</fieldset>
</form>
Here is my controller:
appControllers.controller('appItemPostCtrl', ['$scope', '$location', 'appItems', 'appTypes', function ($scope, $location, appItems, appTypes) {
var itemEntry = new appItems;
console.log(itemEntry);
$scope.types = [];
appTypes.query(function (typedata) {
var itemTypes = typedata.value;
// Foreach type, push values into types array
angular.forEach(itemTypes, function (typevalue, typekey) {
$scope.types.push({
label: typevalue.Title,
value: typevalue.Title,
});
})
});
$scope.createItem = function () {
itemEntry.Title = $scope.itemtitle;
itemEntry.$save();
}
$scope.cancel = function () {
}
}]);
UPDATE: It appears that this is related to SharePoint (My Angular Form is in SharePoint), as even setting the button type to submit as follows triggers the refresh instead of running the function. SharePoint is wrapping everything in a form since it inherits from the Master page of the Web, so when I added two "Angular Forms" to the page, the first angular form was closing the tag on the SharePoint form so the second was able to work. Does anyone have a stable workaround (beyond creating a custom masterpage). Image as follows:
I solved it by closing the tag of SharePoint instead of creating a custom masterpage. Ex:
<!-- Close the default form tag put in place by SharePoint instead of creating a custom Masterpage without this element that requires increased permissions and complexity to deploy. Without this tag closed, the form below will not render properly -->
</form>
<div>
<form id="newItemForm" class="form-horizontal" data-ng-submit="createItem()">
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
</div>
</div>
<div class="col-lg-10 col-lg-offset-2">
<!--<button type="button" class="btn btn-default" data-ng-click="cancel()">Cancel</button>-->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Add type='button' to the buttons. I had this same problem before and assumed it was an angular bug of some kind.
Do both buttons exhibit this behavior or just the Submit button?
The submit button calls newItem from ng-click, but the name of the function in the js is actually createItem.
I'm pulling a list of accounts from my data base, and using that info to make a select drop down with the name showing, and id as the value. That all works fine, however, once I try to send it to my controller to be posted to my API, there's no to or from accounts. I have the ng-model on both fields, but it doesn't seem to do anything.
Here's my HTML
<form novalidate>
<div ng-controller="newTransactionController">
<div >
<label for="from">From Account</label>
<select name="from" ng-options="acct as acct.label for acct in options" ng-model="transaction.fromAccount" >
<option value="acct.value"> </option>
</select>
</div>
<div>
<label for="to">To Account</label>
<select name="to">
<option ng-repeat="account in accounts" value="{%account._id%}" ng-model="transaction.toAccount">{%account.name%}</option>
</select>
</div>
</div>
<div>
<label for="amount">Amount</label>
<input type="text" name="amount" id="amount" value="" tabindex="1" ng-model="transaction.amount"/>
</div>
<div>
<label for="currency">Currency</label>
<select name="currency" ng-model="transaction.currency">
<option value="USD">USD</option>
<option value="BTC">BTC</option>
</select>
</div>
<div>
<label for="interval">Interval</label>
<input type="text" name="interval" id="interval" value="" tabindex="1" ng-model="transaction.interval"/>
</div>
<div>
<label for="processDate">Process Date</label>
<input type="text" name="processDate" id="processDate" value="" tabindex="1" ng-model="transaction.processDate"/>
</div>
<div>
<input class="button" type="submit" value="Send" ng-click="createTransaction(transaction)"/>
</div>
</form>
And my controller
$http.get('').success(function(data){
$scope.accounts = data;
var options = $scope.options = [];
for(var i=0; i < data.length; i++){
$scope.options.push({label: data[i].name, value: data[i]._id});
}
});
$scope.createTransaction = function(transaction){
var transactions = {
fromAccount: angular.copy(transaction.fromAccount),
toAccount: angular.copy(transaction.toAccount),
amount: angular.copy(transaction.amount),
currency: angular.copy(transaction.currency),
interval: angular.copy(transaction.interval),
processDate: angular.copy(transaction.processDate)
};
$http.post('', transactions).success(function(){console.log('sent')});
};
When I log out transactions in the controller, all I get is: Object {amount: "1", currency: "USD"}
I'm lost. I can't figure out what's missing here.
Found my problem. It was a scope issue with the <div> tag surrounding both of the to and from accounts.