<div data-ng-repeat="provider in providers">
<div>
<input type="checkbox" data-toggle="tooltip" data-placement="top"
data-original-title="Default tooltip"/>
<b>Add to compare</b>
</div>
</div>
If using this code under ng-repeat it is not working.If im using without ng-repeat it is working.
This is because the attribute used for Bootstrap Tooltip Title is "title" and not "data-original-title"
You can use
Html
<div data-ng-repeat="provider in providers">
<div>
<input type="checkbox" data-toggle="tooltip" data-placement="right" title="Provider {{provider}}" />
<b>Add to compare</b>
</div>
</div>
Angular
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
// Check/uncheck all boxes
$scope.providers = [1,2,3,4,5,6];
});
Refer Plunker
Refer Bootstrap Tooltip
Related
I need am not able to access the $scope.mainform.subform.submitted property in my script. My html goes as below.
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
#*Same goes for other personal details*#
<input type="button" id="submitbutton" value="Save" ng-model="Submit" ng-click="saveDependentDetailsClick($event, $index, dependent)" />
</ng-form>
</div>
</div>
Can anyone help?
First of all, I think that it's not correct to use <ng-form name="subform">...</div> in ng-repeat in a way you have used it because you will end up with multiple forms having same name(subform) within the same scope therefore you can't refer to each of these forms as they have not unique name providing you with reference to them.
You will also end up with multiple submit buttons with the same id="submitbutton" in same html document which is an invalid html.
try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
$scope.DependentDetails = [{"FirstName":""},{"FirstName":""}];
$scope.saveDependentDetailsClick = function(DependentDetails){
console.log(DependentDetails);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
<input type="button" value="Save" ng-click="saveDependentDetailsClick(dependent)" />
</ng-form>
</div>
</div>
</div>
I'm having an issue(the databinding does not work) when I tried to integrate angular js with semantic ui, specially if I'm using radio buttons fields like code bellow:
the html
<div ng-controller="MyCtrl">
<div class="ui form">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" ng-model="value" value="foo" ng-change="newValue(value)">
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" ng-model="value" value="boo" ng-change="newValue(value)">
</div>
</div>
</div>
{{value}}
</div>
and the controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.value= 'foo';
$scope.newValue = function(value) {
console.log(value);
}
}
I think you are missing a controller:
myApp.controller('MyCtrl', function() {});
then you should place all your logic inside it, otherwise I am not sure that data recycling will work without using $apply to collect it.
You need a directive to have data binding with radio button,
this can be useful SemanticUI-Angular-checkbox
Here when i click on radio button the following div should be disable if the checked radio button is equals to sj.But here its not working if i use ng-repeat for radio button same is working if its static.Could any one help me out what is the mistake i have done here?
<div ng-app="plunker">
<div class="wrap" ng-controller="MyCtrl">
<h1>Hello there!</h1>
<p>Push the radio buttons to change the content!</p>
<form>
<div ng-repeat="s in color">
<input id="first" type="radio" name="content" ng-model="content" value="s.name">{{s.name}}
<br/></div>
</form>
<div class="wrapper">
<p ng-show="content == 'sj'">This is the first content!</p>
</div>
</div>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MyCtrl', function($scope) {
$scope.color = [{"name":"sj"},{"name":"asfdsaf"},{"name":"sdfsadf"},{"name":"sdf"}];
});
</script>
Couple of things are missed
Change you ng-model scope variable to point its parent like ng-model="$parent.content" instead of ng-model="content", because ng-repeat creates child scope from current scope.
Use ng-value instead of value attribute for binding scope variable to it.
HTML
<form>
<div ng-repeat="s in color">
<input id="first" type="radio" name="content" ng-model="$parent.content" ng-value="s.name">{{s.name}}
<br/>
</div>
</form>
Working Plunkr
you can check the code in this
var app = angular.module('plunker', []);
app.controller('MyCtrl', function ($scope) {
$scope.contentshow=true;
$scope.color = [{
"name": "sj"
}, {
"name": "asfdsaf"
}, {
"name": "sdfsadf"
}, {
"name": "sdf"
}];
$scope.showsj=function(radioshow){
if(radioshow.name==='sj'){
$scope.contentshow=false;
}
else{
$scope.contentshow=true;
}
};
})
.done-true {
text-decoration: line-through;
color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<div ng-app="plunker">
<div class="wrap" ng-controller="MyCtrl">
<h1>Hello there!</h1>
<p>Push the radio buttons to change the content!</p>
<form>
<div ng-repeat="s in color">
<input id="first" type="radio" name="content" ng-model="content" value="s.name" ng-click="showsj(s)">{{s.name}}
<br/>
</div>
</form>
<div class="wrapper">
<p ng-show="contentshow">This is the first content!</p>
</div>
</div>
</div>
I have an ng-repeat with a button inside which calls a controller method.
I'm using the Ionic Framework which is based on AngularJS
I can't get the button to actually trigger the controller method unless I revert to using plain Angular (or one more variant, which I will show later).
My example of the broken situation can be seen here in jsfiddle.
You can see that the red button works (generates an alert) and the green, inside the ng-repeat doesn't, while it is calling the exact same controller function.
Here is the controller code:
angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {
var answers = [];
addOptionToArray("Option 1");
addOptionToArray("Option 2");
addOptionToArray("Option 3");
$scope.answers = answers;
$scope.doSomething = function() {
alert("clicked");
};
function addOptionToArray(optionText) {
answers.push({text : optionText});
}
}]);
and the page layout:
<div ng-app="todoApp">
<div ng-controller="TodoController">
<button class="button button-assertive" ng-click="doSomething()">
<i class="icon ion-minus-circled"></i>
</button>
<label class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text">
<div class="buttons">
<button class="button button-balanced" ng-click="doSomething()">
<div>click</div>
</button>
</div>
</label>
</div>
</div>
Now there are two thins that will make the button inside the ng-repeat work again
Replace the Ionice bundle JS reference with a pure `AngularJS' one as can be seen here in jsfiddle
While keeping the Ionic JS reference, remove the <input>' inside the ng-repeat see jsfiddle
Any idea of why having the <input> inside the ng-repeat breaks the button's ng-click?
Or what is broken in Ionic?
Your problem is with block elements inside inline elements. Don't put <div> inside <button> or <label>. Fix it and it works as expected:
<div ng-app="todoApp">
<div ng-controller="TodoController">
<i class="icon ion-minus-circled"></i>
<div class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text" />
<div class="buttons">
Click
</div>
</div>
</div>
</div>
I am using webshims for HTML support in IE8. My HTML form validation is working in IE8. But when I have a form in a popup (I am using Angular UI Modal), on form submit(ng-submit) the modal box closes and the validation message appears on top right corner.
My Environment is
jquery-1.11.1.js
AngularJS v1.2.26
Angular UI Modal 0.10.0
webshim-1.15.4
In the console I get this script error
"invalid element seems to be hidden. Make element either visible or use disabled/readonly to bar elements from validation. With With fieldset[disabled] a group of elements can be ignored! In case of select replacement see shims/form-combat.js to fix issue."
part my Angular app HTML loading webshims
<script src="resources/js/jquery-1.11.1.js"></script>
<script src="resources/js/js-webshim/minified/polyfiller.js"></script>
<script>
$.webshims.setOptions('forms', {
overrideMessages : true
});
$.webshims.setOptions({
waitReady : false
});
$.webshims.polyfill();
</script>
// below method in angular app to update Polyfill when dynamic view loads.
angular.module('essApp').run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$('body').updatePolyfill();
});
});
My angular function to call a popup/modal
$scope.showGoalDetail = function(index) {
$log.info('index is', index);
$log.info('goal is', $scope.goals.goalList[index]);
var modalInstance = $modal.open({
templateUrl : 'org/goalDetailPopUp.html',
controller : 'PopUpInstanceCtrl',
size : 'lg',
backdrop : 'static',
resolve : {
valueObject : function() {
var valueObject = new Object();
valueObject.goal = {};
angular.copy($scope.goals.goalList[index], valueObject.goal);
valueObject.kpiList=$scope.goals.kpiList;
return valueObject;
}
}
});
My form in Modal Window
<div class="modal-header" style="background-color: #428bca; color: #FFFFFF">
<h3 class="modal-title">Goal Detail</h3>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<p class="panel-title">Administration of prespective and priority</p>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" ng-submit="ok()">
<div class="form-group">
<label class="col-md-2 control-label">Dimension</label>
<div class="col-md-6">
<input type="text" class="form-control" required disabled ng-model="valueObject.goal.perspectiveDesc">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Key PerformanceIndicator</label>
<div class="col-md-10">
<textarea class="form-control" required ng-model="valueObject.goal.keyPerformanceIndicator"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary">OK</button>
<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
</form>
</div>
</div>
</div>
<div class="modal-footer"></div>
I need the validations to appear properly on popup next to the field