So i have this html. The issues is that is changing the model(filter) when i select one of those that i have create in a static way but the dynamic ones does not trigger the change of the value. Any ideas?
Thanks.
<div class="row">
<div class="col-xs-6">
<h3>Group 1</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="5"><label>5</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="4'"><label>4</label>
</div>
</div>
<div class="col-xs-6">
<h3>Group 2</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="3"><label>3</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="2'"><label>2</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="1"><label>1</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>DinamicItems</h3>
<hr>
<div class="checkbox" ng-repeat="item in items">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="'{{item.value}}'"><label>{{item.text}}</label>
</div>
</div>
</div>
What Charlie is saying is, your model of tag is a primitive one. Each instance of ng-repeat creates it's own scope. Therefore, your models, although named 'tag', are not in fact the same.
To remedy, you should make your model something like vm.tags (vm = view model.)
A few things to read up on, and learn more:
Controller As: https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/
ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat
Understanding Scopes https://github.com/angular/angular.js/wiki/Understanding-Scopes (When I was getting started with Angular, I had to read through this a few times, and still do on occasion)
Related
I want to retrieve the position of a checked value :
HTML:
<div ng-repeat="i in range(Data.nop)">
<div class="form-group">
<div class="col-md-6 col-xs-12">
Option {{i}})
<br>
<input type="checkbox" ng-model="score1[i-1]" ng-value="{{i-1}}" name="score1"/>
<br>
{{score1}}
<textarea ng-model="options[i-1]" class="form-control"></textarea>
</div>
</div>
</div>
Controller:
$scope.score1=[];
The following solves my initial problem:
HTML
<div ng-repeat="i in range(Data.nop)">
<div class="form-group">
<div class="col-md-6 col-xs-12">
Option {{i}})
<br>
<input type="checkbox" ng-model="score1[i-1]" name="score1" ng-value="{{i-1}}" ng-true-value="'checked'" ng-false-value="'unchecked'"/>
<br>
<textarea ng-model="options[i-1]" class="form-control" ></textarea>
</div>
</div>
</div>
Controller
$scope.options=[];
$scope.score1=[];
$scope.scores=[];
angular.forEach($scope.score1,function(value,key){
if (value ==='checked'){
$scope.scores.push(key);
}
});
I have an ng-repeat to iterate over form fields.
The problem is, if I have an invalid form I don't get any feedback. I don't see the span, nor do I see has-error get applied to the div.
I must be missing something simple, can anyone see what it is?
Here's the ng-repeat code:
<div ng-repeat="i in items">
<ng-form novalidate class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div>
</ng-form>
</div>
Which generates an entry like this:
<div ng-repeat="i in items">
<ng-form novalidate="" class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">Username</label>
<input name="userInput" class="form-control" type="text" ng-model="item.answer" placeholder="Username" required>
<span ng-show="userForm.userInput.$invalid" class="ng-hide">TEST</span>
</div>
</ng-form>
</div>
You want create more than one "userForm"?
If not you can change it to
<ng-form novalidate class="user-form" name="userForm"> <div ng-repeat="i in items">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div> </div>
</ng-form>
Hope it helps.
I am trying to iterate the radio buttons using ng-repeat. All the radio buttons are visible perfectly with first radio button checked, but when I try to select the other radio buttons, radio buttons are not clickable. can anybody please help me out what I am missing here..!!
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4" name="optionsRadiosA" value="option4" checked="">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
corrected html
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{n}}" name="optionsRadiosA" value="{{n}}" checked="">
<label class="form-label" for="rb4_{{n}}">{{n}}</label>
</div>
</div>
</div>
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{$index}}" name="optionsRadiosA" ng-model="radioVal[$index]">
<label class="form-label" for="rb4_{{$index}}">{{n}}</label>
</div>
</div>
</div>
I have added ng-model="radioVal_{{$index}}" in each of input iteration, why because it's ng-model who will contain current ng-value of your radio buttons. Try it, and get back to me.
and Id's are dynamically generated now.
Working Now!!!!!!
You need to fix the following issues:
The model must exist in parent scope. To do this, use ngInit to initialize an ngModel outside of your ngRepeat: ng-init="selected = { number:0 }"
All radio button controls must bind to the same ngModel. Add an ngModel to your input control, and bind it to the ngModel that you declared in parent scope: ng-model="selected.number"
Display different values for each radio button: value="{{n}}"
NOTE: Remember, ngRepeat creates a child scope for each iteration.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="selected = { number:0 }">
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" ng-model="selected.number" type="radio" value="{{n}}">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
{{ selected }}
</div>
You should have different ng-model for each radio element, you could do it by using ng-model="radio[$index]"
Markup
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4-{{$index}}" name="optionsRadiosA" ng-value="option4" ng-model="radioVal">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
I am using CakePHP 3.x
I am trying to skin a themeforest theme into a CakePHP plugin.
Midway, I am deciding whether to skin a portlet into helper, element, or view cell.
The portlet html code looks something like this:
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box yellow">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> More Form Samples
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<h4>Inline Form</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Inline Form With Icons</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail22">Email address</label>
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="exampleInputEmail22" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword42">Password</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="exampleInputPassword42" placeholder="Password">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Horizontal Form</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword12" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<input type="password" class="form-control" id="inputPassword12" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn blue">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Horizontal Form With Icons</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="inputEmail12" placeholder="Email">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<div class="input-icon right">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
<div class="help-block">
with right aligned icon
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn green">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Column Sizing</h4>
<form role="form">
<div class="row">
<div class="col-md-2">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-3">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder=".col-md-4">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
The look is like this:
My question is how do we know when we should use Element? When we should use Helper? and When should we use View Cells?
And which case should I use for the above? I am leaning towards Helper.
Element
Use it when you need to repeat presentation related stuff, usually HTML, a lot. For example I have a project in which three tables use records of an addresses table. The form part of all of these three that contains the address data is an element.
Helper
Use it to encapsulate view logik, don't put HTML in it if possible or other presentation related things. For example let it do something and depending on the result you can use an element of that result type to render the data: return $this->_view->render('items/' . $type . '_item');
If you look at the core helpers for example the HtmlHelper you'll see a property $_defaultConfig:
protected $_defaultConfig = [
'templates' => [
'meta' => '<meta{{attrs}}/>',
'metalink' => '<link href="{{url}}"{{attrs}}/>',
/*...*/
These are the template strings that are used to generate the HTML output. This separtes the markup pretty nice from the actual code that generates it. Take a look at the FormHelper as well, it's using widgets to render more complex output.
So this works fine with element like pieces of markup. By a rule of thumb I would say if your markup is longer than what you see there make it an element and call it from within the helper or make it a widget.
View Cells
Think of view cells as "Mini MVC" stacks that have a view and can load multiple models. They're IMHO similar to AngularJS directives if you're familiar with them. See this article for an example. I really suggest you to read it, it explains them and their use cases in detail.
I haven't done much with them yet but they can be used to replace requestAction() calls for example. You won't "pollute" your controller with methods that are not intended to be access by a request.
Taken from the linked article above:
One of the most ill-used features of CakePHP is View::requestAction().
Developers frequently use this all over their applications, causing
convoluted cases where you need to figure out if you are within a web
request or an internal action request, cluttering controllers. You
also need to invoke a new CakePHP request, which can add some unneeded
overhead.
Disclaimer
The above reflects my personal view on these things, there is no ultimate and final rule how you have to use these three things. The goal is always clean and re-useable code and proper separation of concerns. How you archive that is up to you, you've got the tools. :)
Here's FIDDLE
Not able to understand that why the required validation is not working ??
HTML
<div ng-app="app">
<div ng-controller="myctrl">
<form name="myform" class="form form-horizontal" novalidate>
<fieldset class="fieldset" ng-show="payment == 'bankAccount'" class="form-group clearfix">
<ul class="form-group">
<li ng-class="{
'has-error': myform.routingNumber.$invalid,
'has-success':myform.routingNumber.$valid}">
<label for="routingNumber">Bank Routing Number</label>
<div class="" ng-show="myform.routingNumber.$error.required"> <span class="help-block">Please enter routing number</span>
</div>
<input type="text" name="routingNumber" class="form-control" required/>
</li>
</ul>
</fieldset>
</form>
</div>
</div>
JS
var app = angular.module('app', [])
You need to provide an ng-model for the angular validation on the form to kick in.
Try:-
<input type="text" ng-model="routingNumber" name="routingNumber" class="form-control" required/>
On a side note:- there is no use of using label for without using id on the target input.
Demo