Would like to use btn-checkbox in place of all my checkboxes on a form. I am looking for the syntax to make a generic reference to the value of the bound property from within the attributes, in this case ng-class.
<button type="button"
ng-class="{true: 'btn btn-success',
false:'btn btn-checkbox-off'}
[vm.csrMain.doubleAggregate]"
ng-model="vm.csrMain.doubleAggregate"
btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false">
DOUBLE AGGREGATE
</button>
( using ctrl as vm syntax ) The code above works, but I want to make a generic reference to the value of the ng-model in the brackets where I am hard coding the bound property [vm.csrMain.doubleAggregate] something like [ng-model.$value]
Tried to do a plunker here. Not sure why I can't get the btn-checkbox behavior I get successfully in the code above. If someone could guide me on that as well I'd appreciate it as this my first shot at a plunk from scratch plunker
Related
I have a form and I want to check if all the fields are valid or not.
Currently I am using four different methods. Nothing is working. Here is my plunker:
http://plnkr.co/edit/c4czI1W1fvXR4881SP1z?p=preview
Here are the methods I am using to check for validity
<button ng-click="my.$valid && validityCheck()">Update</button>
<div>myForm.$valid = {{myForm.$valid}}</div>
<span ng-show="myForm.$valid" style="color:green">Yippii!</span>
<span ng-show="myForm.$invalid" style="color:red">Not :(</span>
Plunkder code has few errors.
Missing angular script tag
ng-click should refer to myForm instead of my. ng-click="myForm.$valid
Inject $scope to controller (or use this). function($scope){
http://plnkr.co/edit/Twz9E9LnQ08IpweLARjG
I have an Angular Formly form inside an ng-repeat. I've got everything working as I would expect except for the reset button. For some reason clicking any reset button always resets the last form, not the one it's supposed to. Submitting and updateInitialValue() seem to work fine.
<div ng-repeat="model in vm.models">
Here is the form declaration inside the repeat:
<formly-form model="model" fields="vm.fields" options="vm.options[$index]" form="vm.form[$index]">
And here is the reset button.
<button type="button" class="btn btn-default" ng-click="vm.options[$index].resetModel()">Reset</button>
Here is the whole thing in a fiddle.
http://jsbin.com/feguvulumo/edit?html,js,output
Thanks in advance for any help you can give!
I figured this out with some help from #kentcdodds on the Formly gitter chat (https://gitter.im/formly-js/angular-formly)
He suggested that the issue was that the repeating forms are sharing the same field configuration.
To fix it, I implemented a function that was called by an ng-init inside the ng-repeat. It builds up an array of fields objects as it loops.
function addFields() {
vm.fields.push(new getFields());
}
I then changed the fields property on the <formly-form> like so
<formly-form model="model" fields="vm.fields[$index]" options="vm.options[$index]" form="vm.form[$index]">
Full solution
http://jsbin.com/yanopeyija/1/edit?html,js,output
I am also new to angular, but generally this could be achieved if we change the button type as reset :
<button type="reset" >
I'm using angular-ui-bootstrap radio button btn-radio directive together with the angular-translate i18n translate directive
The combination of both directives in the <label> element makes the btn-radio failing.
I created a plunkr to show the btn-radio behaviour
I know there are some issues sharing multiple directives on one dom element and a workaround could be to put the translate directive on a sub span element, or using the translate filter.
So, my question is: is there a way to make these both directives work on the same element?
My mother tongue is Korean, not English. so, my english is not good.
cause : conflict bootstrap ui and translate library with html element attribute
solution :
not using translate with element attribute
so, remove element translate attribute.
add function to controller for translate language options.
ex)
$scope.translate = function(id)
{
return $translate.instant(id);
};
translate using function
ex)
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">{{translate('BTN_A')}}</label>
demo : http://plnkr.co/edit/TPwTan2dSmMVQbNtxpgg?p=preview
test with blue button.
I just run into the same problem and found a simpler solution without the need to add a function in the controller, but simply using the filter:
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">{{'TRANSLATION.KEY' | translate}}</label>
Learning angularjs at the moment, and I am confused as to how I can accomplish a task because I don't fully understand what ngModel is doing.
If I have a directive with two scope variables:
// An array of all my objects
$scope.allMyObjects
// The currently selected object from the array
$scope.selectedObject
and in the html
<span>{{ selectedObject.name }}</span>
<select id="select"
ng-model="selectedObject"
ng-options="object in allMyObjects">
</select>
This all works perfectly, when I select an object from the select, it updates the selectedObject on the scope and so the name of the currently selected object is displayed.
However, I don't want a select box, instead I want a list of all my objects with an editable name field, with a select button that I can use to select the specified object, so I came up with the following:
<div ng-repeat="object in allMyObjects">
<input class="object-name"
ng-model="object.name">
<a ng-click="loadObject(object)">Load</a>
</div>
and the loadObject() function on the scope:
function loadObject(object) {
$scope.selectedObject = object;
}
However, this doesn't work. I had assumed this was basically what ngModel was doing behind the scenes but am obviously confused. Is anyone able to shed some light or offer a better solution to what I wish to achieve?
Please see here :http://jsbin.com/jocane/1/edit?html,js,output
use ng-model="object.name" instead "sc.name"
<div ng-repeat="object in allMyObjects">
<input class="object-name"
ng-model="object.name">
<a ng-click="loadObject(object)">Load</a>
</div>
After an hour of debugging it came down to an issue with the scope being isolated by the ng-repeat, the problem didn't show up in any of the simplified jsfiddle examples because they used pure JS and it was the way I was accessing the scope via typescript that caused the issue.
Thanks for the answers that helped me narrow it down to my difficulty understanding typescript and not my difficulty understanding directives.
I have no idea how to pre-populate an ng-model in this circumstance that I have to use ngBind. I tried ng-init, but it's not working.
<h6 ng-show="isOwner" ng-bind="currentMagazine.magazine_name"
contenteditable ng-model="currentMagazine.magazine_name"
ng-change="update()"></h6>
I have a seperate directive that binds contenteditable attributes to ngModelController.
The problem now is whenever I update the model, ng-bind will jump out and refresh the div element, resulting in the cursur going back to the beginning of the text, which makes it impossible for any user to type.
I tried ng-init in a fashion like this:
<div ng-init="magazineName = currentMagazine.magazine_name">
<h6 ng-show="isOwner"
contenteditable ng-model="magazineName"
ng-change="update()"></h6>
</div>
It's not working. If I don't use ng-bind, then no text will show up.
Also I notice it might be related to this problem, when I type with space or delete key, they are escaped into HTML entities...so you get result like this:
Hopefully both of my problems can be solved! Thank you (it's a very frustrating day)!
In your app.js do this:
$scope.magazineName = $scope.currentMagazine.magazine_name;
In your HTML do something like this:
<input
ng-show="isOwner"
contenteditable
ng-change="update()"/>
or
<h6 ng-show="isOwner"
contenteditable
ng-model="currentMagazine.magazine_name"
ng-change="update()">
{{currentMagazine.magazine_name}}
</h6>
... though perhaps not, it's a bit difficult to gauge without seeing it... please make a jsfiddle or plunkr if you'd like to get more eyes on it.
If you're just trying to make some large text that is still editable and bound to the model it may be easier to just style an input for your needs.
Decided to play with contenteditbale since it's chance for me to learn something too... I can't seem to recreate the issue though:
http://jsfiddle.net/VSJQX/
I saw after doing this it wasn't updating the model, found another SO post that resolves that and included the changes here:
http://jsfiddle.net/VSJQX/2/