i have data like this :
$scope.list = {
0:{'type':'text','required':true},
1:{'type':'text','required':false},
2:{'type':'text','required':true}
};
i'm using ng-repeat to create form
<div ng-repeat="l in list">
<input type="{{l.type}}" />
</div>
how I want to get the attributes "required" if the value of "l.required" is true
like this :
<div>
<input type="text" required />
</div>
<div>
<input type="text" />
</div>
<div>
<input type="text" required />
</div>
how I do that
Try:
<div ng-repeat="(k, l) in list">
<input type="{{l.type}}" ng-required="l.required" />
</div>
since it is an object that you are iterating through you would need to use the value of the iteration i.e (k, l) in list and use ng-required to set the required flag.
Related
<div class="gallery_re_form">
<form action="http://gall.dcinside.com/?/forms/comment_submit" method="post" accept-charset="utf-8" name="comment_write" id="comment_write" />
<div style="display:none">
<input type="hidden" name="ci_t" value="625752bb366f010c56e506e5d0f93822" />
</div>
<input type="hidden" name="ehqo_C" id="ehqo_C" value="spam_key" />
<input type="hidden" name="spam_key" id="spam_key" value="rhkdrhgkwlak!!" />
<input type="hidden" name="fb8f95190d2b70480acb309f91653d7e4416d4f99a0b67a0b866f06087fdec4588f68fe210675e74919d2ecc50e08f1fd6f75119" id="fb8f95190d2b70480acb309f91653d7e4416d4f99a0b67a0b866f06087fdec4588f68fe210675e74919d2ecc50e08f1fd6f75119" value="b9d3cc45576e30144d8f299fdc61356552989b3aba08238c811b1d3183a104cc2d1d3984af72c4f2eaa2738ca41819d05533731a" />
<input type="hidden" name="service_code" value="21ac6e96ad152e8f15a05b7350a24759b5606fa191c17e042e4d0175735f4c61d63153c3ce7b4eb89b565a7f6a04ad0667df75f39625ab6fe0816d23f4bed5387546b52d6874b5c201e54df7b5db9187219b048cffc9ef8a106febabfba125eff122df732d9cc52fcaae8b11c42ff5f6fd5ef81901df4103827e7233615992141c180be76852634d53b60c6f911ccdfc762b3db554d8ee36528547bceede30697120c5291acb255a" />
<br />
<div class="re_input">
<div>
<ul>
<li>
<input type="text" name="name" id="name" class="re_name re_in" onfocus="this.style.background='#FFFFFF'" title="nickname" />
</li>
<li>
<input type="password" name="password" id="password" class="re_pw re_in" onfocus="this.style.background='#FFFFFF'" title="password" />
</li>
</ul>
</div>
</div>
</form>
I'm trying to rewrite google chrome extensions. I want to get #spam_key s #service_codes value in this HTML response.
I have not used JavaScript.
How can I get HTML element id (spam_key, service_code) and value by JavaScript?
DOM has a document object , you can use it like this to get the HTML element what you want
document.getElementById("id")
Now to get value, just use value property of this element.
document.getElementById("id").value
You want to retrieve the spam_key element and service_code element's values?
var spam_key = document.querySelector('#spam_key');
var service_code = document.querySelector('input[name=service_code]');
console.log(spam_key.value);
console.log(service_code.value);
You can learn more about selection element from javascript at here
You can get value of an HTML input element using:
var spam_key = document.getElementById('spam_key').value;
var service_code = document.getElementById('service_code').value;
Try this, It should give the value of spam_key
document.getElementById('spam_key').value;
If you have jQuery included you can get it by following: $("#spam_key").val()
I am currently trying to figure out how to keep reference to individual dynamically added input fields. I have a modal popup as follows:
<div ng-controller="SamplesQueryController">
<button ng-click="toggleModal()" class="btn-splash-small">Add Sample</button>
<modal title="Create New Sample" visible="showModal">
<form role="form">
Sample Name:<br>
<input type="text" ng-model="newSampleName.sampleName">
<br> Attribute 1 Name:<br>
<input type="text" ng-model="newAtt1Name.att1Name">
<br> Attribute 1 Value: <br>
<input type="text" ng-model="newAtt1Value.att1Value"> <br>
<button id="submitSample" ng-click="createSample();toggleModal()">Submit
Sample</button>
<button id="addAttribute">Add Attribute</button>
<button ng-click="toggleModal()">Close</button>
</form>
</modal>
</div>
which currently has an input field for att1Name and att1Value, I have an addAttribute button which should add 2 new input fields (for att2Name and att2Value). I can dynamically create the inputs using a method such as:
<input type="text" ng-repeat="myinput in myinputs" ng-model="myinput">
</input>
but how can I keep reference to each of the typed in values in the input fields and how can I create 2 fields for each element in myinputs
Preferably, I would be storing these values in some sort of structure like attributes.att1.name, attributes.att1.value, attributes.att8.name, etc
You'll want to have your model as an Array that contains Objects, which has the property 'name' and 'value' initiated.
Then it's pretty easy to create a ng-repeat div, that contains 2 text input fields:
<div ng-repeat="input in inputs">
<input type="text" ng-model="input.l">
<input type="text" ng-model="input.v">
</div>
Then you can subsequently add the fields by pushing newly initiated object to the $scope.inputs.
function add() {
var obj = {attr1Name: '', attr1Value: ''};
$scope.inputs.push(obj);
}
Working fiddle here: https://jsfiddle.net/ccvLhmps/
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h2>Cost Calculator</h2>
<p></p>
<p></p>
<p></p>
<div ng-app>
<input name="amount" ng-model="a" placeholder="Amount" />
<input name="adjustment" ng-model="b" placeholder="Adjustment" />
<input name="advance" ng-model="c" placeholder="Total" value='{{ a-b}}' />
<input name="balance" placeholder="Total" readonly required value='{{ a-b-c}}' />
</div>
</body>
</html>
I have used mvc partial control in my page twice for search functionality.
It has it own controller to search, so my page has two controller with same name.
<div ng-app="app" ng-controller="MainController" ng-init="SetSearchParam()">
<div id="search1">
#Html.Partial("_SearchPartial") // say it search1
// some other code to show search results
// ....
// ..
</div>
<div id="search2">
#Html.Partial("_SearchPartial") // say it search2
// some other code to show search results
// ....
// ..
</div>
</div>
This is _SearchPartial:
<form name="SearchCommon">
<div ng-model="search" ng-controller="SearchPartialController">
<div>
<input type="text" value="" placeholder="Stock" ng-model="search.Stock" />
</div>
<div>
<input type="text" value="" placeholder="Make" ng-model="search.Make" />
</div>
<div>
<input type="text" value="" placeholder="Year" ng-model="search.Year" />
</div>
<div>
<input type="submit" value="SEARCH" ng-click="searchdata(search)" />
</div>
</div>
</form>
Now on init of MainController , i set the search model value in SetSearchParam() method like below:
$scope.SetSearchParam = function(){
var s = {};
s.Make = "Test";
s.Year = "2012";
s.Stock = "5"
$scope.search = s;
};
As search model is used in SearchPartialController, and page has two search control, value of s will be set in both partial controller. Also when i change params in search1, it will reflect search2.
I want that those search params only set for search1, not for search2.
When i change search1 params , it should not reflect the search2 or vice versa.
Is there any way to achieve it?
I thing you should initialize your filter(search) before your function.
Controller:
$scope.search1 = { Make : "Test", Year: "2012", Stock : "5" };
$scope.searchdata = function(search){console.log(search);};
Your view:
<body ng-controller="SearchPartialController">
<form ng-submit="searchdata(search1)">
<input type="text" placeholder="Stock" ng-model="search1.Stock" />
<input type="text" placeholder="Make" ng-model="search1.Make" />
<input type="text" placeholder="Year" ng-model="search1.Year" />
<button type="submit" class="btn btn-sm btn-primary">
Save
</button>
</form >
</body>
I have a detail view and from database only single record is comming, I need to assign data to controls. below is my code
var app = angular.module("MyProductApp", []);
app.controller("ProductsController", function ($scope, $http) {
var ProductID = #Html.Raw(Json.Encode(ViewData["ProductID"]));
$http.get('/api/Products/GetProductForEditOrDetail',{params: { ProductID : ProductID }}).
success(function(data){
$scope.Product = data;
}).
error(function(data){
alert("msg");
});
});
and below is html code
<div ng-app="MyProductApp" class="form-horizontal">
<div ng-controller="ProductsController">
<h4>Product</h4>
<hr />
<div class="form-group" >
<label class="control-label col-md-2">Product Name</label>
<div class="col-md-10">
<input id="txtProductName" type="text" class="form-control" name="txtProductName" disabled="disabled" Value="{{Product.ProductName}}" />
<input id="hdnProductID" type="hidden" class="form-control" name="hdnProductID" value="{{Product.ProductID}}" />
<input id="hdnCategoryID" type="hidden" class="form-control" name="hdnCategoryID" value="{{Product.CategoryID}}" />
</div>
</div>
</div>
</div>
You should use ngModel directive
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
<input ng-model="Product.ProductName" />
ngModel is what you are looking for, read the docs !
You wanted to pass value with hidden fields, so ng-model would not work in that case, you could use ng-value in that case
<input id="hdnCategoryID" type="hidden" class="form-control" name="hdnCategoryID" ng-value="Product.CategoryID" />
I have a very large model that I am creating a form for using AngularJS. It's nested over 4 levels deep and the names of the fields on the model are very long. I end up with markup like this.
<input type="text" ng-model="something_super_long.another_very_long_thing.hey_lets_add_another.ok_one_more._last_one_seriously"></input>
This is pretty annoying. I wish that I could set up some kind of nested inheritance to avoid setting super long ng-model names over and over. Here is a fully fleshed out EXAMPLE of what I am talking about. I made the model a REASONABLE level of depth only 3 levels of not so long names.
Instead of doing this.
<div ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_1" />
<input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_2" />
<input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_3" />
</div>
</div>
I want to do something more like this:
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-model="building_in_san_francisco">
<div ng-model="layout_floor_1">
<input type="text" ng-model="room_1" />
<input type="text" ng-model="room_2" />
<input type="text" ng-model="room_3" />
</div>
</div>
</div>
</div>
Does anyone know if anything like this is possible?
You could use ng-init in the templates and nest scopes. This keeps your controller clean and uses the child scopes only in the template:
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-scope ng-init="building = buildings.building_in_san_francisco">
<div ng-scope ng-init="floor = building.layout_floor_1">
<input type="text" ng-model="floor.room_1" />
<input type="text" ng-model="floor.room_2" />
<input type="text" ng-model="floor.room_3" />
</div>
</div>
</div>
</div>
JS
angular.module('myApp', [])
.controller('myController', function mainCtrl($scope) {
$scope.buildings = {
building_in_san_francisco: {
layout_floor_1: {
room_1: '1',
room_2: '2',
room_3: '3'
}
}
};
});
You can try this in your controller:
$scope.something=building_in_san_francisco.layout_floor_1;
And when you call it
<input type="text" ng-model="something.room_1" />