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
Related
I'm new to Angular JS so mind my mistakes. I am trying to assign a value to an ng-model through dynamically created radio buttons. So far, this is what I have:
<div data-ng-init="radio=['Core','Software Development','Systsmes Analysis','All']">
<div data-ng-repeat="r in radio">
<div class="form-check">
<input class="form-check-input" type="radio" data-ng-model="types" data-ng-value="types='{{r}}'" name="type" id="{{r}}">
<label class="form-check-label" for="{{r}}">
{{r}}
</label>
</div>
</div>
<p>You chose {{types}}</p>
</div>
I am able to output the radio buttons as seen here:
But I am unable to output the selected radio buttons value.
What I want achieve is something like this:
Where the selected radio button's value pop's up in "You have chosen x".
Any help is much appreciated. Thank you for reading.
You need to use an object with dot notation:
angular.module("myApp", [])
.controller("myCtrl", function($scope) {
$scope.radio = { type: '' }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-init="radio=['Core','Software Development','Systems Analysis','All']">
<div ng-repeat="r in radio">
<div class="form-check">
<input class="form-check-input" id="{{r}}" type="radio" ng-model="radio.type" ng-value="'{{r}}'" name="type">
<label class="form-check-label" for="{{r}}">{{r}}</label>
</div>
</div>
<p>You chose {{radio.type}}</p>
</div>
</div>
I have ng-if conditions in two levels. if the first condition in the first div satisfy the second div should be displayed. Similarly, if the second ng-if satisfies the third div should be displayed. But I can able to see only the second div.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
<input type="radio" ng-click="temp2=true">Yes
<input type="radio" ng-click="temp2=false">No
</div>
<div ng-if="temp2">
<p>Some content</p>
</div>
The last div displays if I use ng-show. But I must not use ng-show. There are some more divs which work based on these conditions. Please help me in this regard
Because the ng-if create new scope. Try this one.
<div><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
<input type="radio" ng-click="temp2=true">Yes
<input type="radio" ng-click="temp2=false">No
<div ng-if="temp2">
<p>Some content</p>
</div>
</div>
Edit
It's better use controllerAs syntax.
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
var vm = this;
vm.setTemp2 = function(){
vm.temp > 40 && vm.temp2 ? vm.temp2= true : vm.temp2=false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl as vm">
<div><input type="number" ng-model="vm.temp" ng-change="vm.setTemp2(vm.temp)" ></div>
<div ng-if="vm.temp>40">
<input type="radio" name="content" ng-click="vm.temp2=true">Yes
<input type="radio" name="content" ng-click="vm.temp2=false">No
</div>
<div ng-if="vm.temp2">
<p>Some content</p>
</div>
</div>
No need to use ng-click, you can just bind the value of radio button with the model using ng-model.
There are actually two problems:
The ng-if create a new scope. So you need to put your second ng-if code inside the parent ng-if.
And you did not give the name property to your radio button which is necessary.
Updated Code:
Just replace your code with the below one..
<div ng-app="">
<div><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
<input type="radio" name="content" ng-model="temp2" value="true">Yes
<input type="radio" name="content" ng-model="temp2" value="false">No
<div ng-if="temp2=='true'">
<p>Some content</p>
</div>
</div>
</div>
This is because ng-if creates a new child scope. This can be avoided by binding the property to an object. By using ., the property will be directly binded to the parent and not the child scope which is created in ng-if. You don't have to restructure all the divs.
var myApp = angular.module('myApp', []);
myApp.controller('ctrl', ['$scope', function ($scope) {
$scope.temp2={};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<body ng-app="myApp" ng-controller="ctrl">
<div ><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
<input type="radio" ng-click="temp2.val=true">Yes
<input type="radio" ng-click="temp2.val=false">No
</div>
<div ng-if="temp2.val&&temp>40">
<p>Some content</p>
</div>
</body>
For more Info : What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
This can also be avoided by using controllerAs syntax as mentioned by #Hadi. controllerAs syntax will take care of the dot rule.
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>
<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
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>