I'm trying to initialize data in combobox, and I have tried every possible ways, but nothing:
<select ng-init= "account.username = githubaccounts[0].username" data-ng-model="account" data-ng-options="account.username for account in githubaccounts"
class="btn btn-default" data-container="body">
</select>
<div class="form-group" ng-show="account.username == 'Other'">
<label for="groupNameTxt">Group Name:</label>
<input type="text" class="form-control" name="groupNameTxt" id="groupNameTxt" placeholder="Enter Group Name..." ng-model="group.groupName">
</div>
Other way that it works is this:
<select class="btn btn-default" data-container="body"
ng-init="githubaccounts[0].username" ng-model="account">
<option ng-repeat="account in githubaccounts" value="">
{{account.username}}
</option>
</select>
But, then, ng-show doesn't work:
Any ideas?
Thank you very much.
Make following changes in code
<select ng-init= "anyModelVariable.username = githubaccounts[0].username" data-ng-model="anyModelVariable.username " data-ng-options="account.username for account in githubaccounts"
class="btn btn-default" data-container="body">
</select>
Changes:
1. use different variable in ng-model other then account.
initialize same variable ng-model with with githubaccounts[0].username.
Related
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 am beginner in AngularJS. So I faced little bit confusion this language. Please check my code:
<form class="form-horizontal" ng-submit="productFormForm.$valid && submitProductForm()" novalidate="" name="productFormForm">
<label for="from_id_dropdown">Templates</label>
<select class="form-control" name="from_id_dropdown" id="from_id_dropdown" ng-model="formData.form_id" ng-change="getDropdownOptions(formData.form_id)" ng-options="option.id as option.name for option in forms_dropdown.availableOptions" required="">
<option value="">Select Template</option>
</select>
<div ng-show="productFormForm.$submitted || productFormForm.from_id_dropdown.$touched" class="">
<span style="color:red;" ng-show="productFormForm.from_id_dropdown.$error.required">Template is required.</span>
</div>
</form>
<form class="form-horizontal" ng-submit="attributeForm.$valid && submitForm()" novalidate="" name="attributeForm">
<label class="tooltip-demo">Label</label>
<input type="text" name="attribute_lebel" ng-model="attr_value.label" class="form-control" placeholder="Label Name" required="">
<div ng-show="attributeForm.$submitted || attributeForm.attribute_lebel.$touched" class="">
<span class="text-danger" ng-show="attributeForm.attribute_lebel.$error.required">Label is required.</span>
</div>
<button class="btn btn-w-m btn-success" type="submit">Save</button>
</form>
Here is two form productFormForm and attributeForm But one submit button which is 2nd form. I want to validate both form those fields are blank.
You can validate both forms using js - example
or in html add <span> after your button -
<span ng-show="attributeForm.attribute_lebel.$error.required || productFormForm.from_id_dropdown.$error.required"> Form not valid</span>
In my code I am using ng-show and ng-required in combination. But, ng-required is not working as expected even when the respective $scope variable value is set to false. Please find the code below
<div role="form" name="selectQuestionsForm" id="selectQuestionsForm" ng-form>
<div class="form-group col-sm-12">
<label class="control-label question-answer-label"
for="firstQuestionSelect">First question</label>
<div>
<select class="form-control nopadding">
<option value="">-- Select --</option>
</select>
</div>
<div ng-show="showCustomQuestion.first" >
<input type="text" class="form-control" ng-model="questionsText.first" ng-required="showCustomQuestion.first"
id="firstQuestionInput" name="firstQuestionInput" validation-min-length="3" validation-max-length="100" />
</div>
<label class="control-label question-answer-label"
for="firstAnswerInput">First answer</label>
<div style="padding-bottom: 15px;">
<input type="text" class="form-control" ng-model="answersText.first"
id="firstAnswerInput" validation-min-length="3" validation-field-required="true" validation-max-length="100" required/>
</div>
</div>
</div>
<div id="securityActionBtnContainer" class="visible-md visible-sm visible-lg">
<button id="saveBtn" type="button" ng-disabled="selectQuestionsForm.$invalid" class="btn btn-default btn-xs pull-right" ng-click="saveQuestion(selectQuestionsForm.$valid)">Save</button>
<button id="cancelBtn" type="button" class="btn btn-xs btn-default pull-right" style="margin-right: 10px;" ng-click="redirect['cancel']()">Cancel</button>
</div>
The select element have a logic to display the option and it is working fine. When we select the option 'Write my own question', the hidden input is displayed. If user choose any other question the custom question input is hidden and not part of the form element. But ng-required is still getting applied though the value is set to the false and respective form doesn't validate.
Please let me know what I am missing to make it work. Thanks in advance for your help.
Use ng-if instead of ng-show. Items hidden using ngShow or ngHide still exist in the DOM and will be processed by angular. It's just not visible to a user.
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
This is my template:
<div class="form-group"
ng-repeat="recipeIngredient in recipes.currentRecipe._ingredients">
<label class="col-sm-2 control-label">Ingredient {{ $index + 1 }}</label>
<div class="col-sm-10 form-inline" role="form">
<input
type="text"
class="form-control"
placeholder="quantity"
ng-model="recipeIngredient.quantity"
>
<input
type="text"
class="form-control"
ng-model="recipeIngredient._unit"
>
<select
class="form-control"
ng-model="recipeIngredient._unit"
ng-options="unit._id for unit in units"
/>
<select
ng-model="recipeIngredient._ingredient"
class="form-control"
ng-model="recipeIngredient._ingredient"
ng-options="ingredient._id for ingredient in ingredients"
/>
<button
type="button"
class="btn btn-default btn-xs glyphicon glyphicon-remove"
ng-click="recipes.currentRecipe.removeRecipeIngredient($index)">
</button>
</div>
</div>
I want to display the ingredients listed in the currentRecipe
If I use:
<input type="text" class="form-control" ng-model="recipeIngredient._unit">
I can see the value of _unit showed
But why the select form does not show at all the current value of recipeIngredient._unit?
<select
class="form-control"
ng-model="recipeIngredient._unit"
ng-options="unit._id for unit in units"
/>
I've verified the the _unit is part of the list of units
If I change the value of the select box to some value, the input text show "Object", which means the real value of the model is the unit object and not the unit._id text
ng-options="unit._id for unit in units"`
Please tell me if you want additional code
I've found out that when I use:
ng-options="unit._id for unit in units"
The text showed in the drop box is unit._id, but the ng-model will be the object in unit and not the text showed!
To correct my problem I've written like this:
<select ng-model="recipeIngredient._unit" class="form-control">
<option ng-repeat="unit in getId(units, '_id')">{{unit}}</option>
</select>
the getId is the function that return a list of _id from units