I'm making a basic todo app in angularjs.
Here's the code that's used to create a new todo with a checkbox
<div class="container" ng-controller = 'controller' >
<h3>Enter Todo </h3> <input type="text" ng-model = 'new'>
<button ng-click = 'add();' ng-disabled="status();">Add</button>
<div ng-repeat = "i in todo" >
<input type="checkbox" ng-model = "todo.done" /> <label>{{i.name}}</label>
</div>
</div>
The problem is that all the checkboxes get checked even when I check just one
Here's my controller module
todoApp.controller('controller',['$scope',function($scope){
$scope.new = '';
$scope.todo = [];
$scope.add = function(){
$scope.todo.push({name : $scope.new, done: false});
console.log($scope.todo);
$scope.new = '';
};
$scope.status = function(){
return !(/\S+/.test($scope.new));
};
ng-model = "i.done"
should solve the problem. In your version ng-model = "todo.done" todo is an array and angular just creates a property on the fly, when it's used for the first time. This way all of your checkboxes are connected to this property, that's why checking one checkbox affects all of them.
Because the list of the checkbox are sharing the same model. You can create a custom directive or you can use checklist-model directive.
Demo URL:
https://vitalets.github.io/checklist-model/
Related
I have a scenario for deleting items.
For this, first I get a list of values with particular condition. The retrieved values whill be shown in the UI with radio buttons to choose the particular item to choose for deleting.
I have given the value for the radio buttons to be the id of the retrieved items. This id is used in angularJS method for deleting. Currently getting undefined value in the angular function inside the controller.
My angular controller is as below:
mainApp.controller("deleteToDoController", function($scope,$http) {
$scope.toDoList = {};
$scope.getToDo = function(){
var url = "http://localhost:8080/webservice-4.0/rest/todo/"+$scope.status;
$http.get(url)
.then(function(response) {
$scope.toDoList = angular.fromJson(response.data);
});
}
$scope.deleteToDo = function(){
var url = "http://localhost:8080/webservice-4.0/rest/todo/delete/"+$scope.deleteId;
$http.get(url)
.then(function(response) {
$scope.toDoList = angular.fromJson(response.data);
});
}
});
My html page code is :
<div ng-controller="deleteToDoController">
<form ng-submit="getToDo()">
ToDo Status:
<input type="radio" ng-model="status" value="completed"/>Completed<input type="radio" ng-model="status" value="pending"/>Not Completed
<input type="submit" value="View To Do"/><br>
<div ng-repeat = "toDo in toDoList">
<input type="radio" ng-model="deleteId" value="{{toDo.id}}"/>Task : {{toDo.name}}<br>
</div>
<input type="button" ng-click="deleteToDo()">Delete</button><br>
</form>
Appreciated!!!!
Since deletedId have been created inside ng-repeat child scope. You won't that scope variable outside ng-repeat, like you were trying to pass it in ng-click
You have to do following .
use Dot rule while defining model, so that Prototypal Inheritance will help to pass reference of variable to child scope.
Use ControllerAs pattern.
Html
<form ng-submit="getToDo()">
ToDo Status:
<input type="radio" ng-model="status" value="completed"/>Completed<input type="radio" ng-model="status" value="pending"/>Not Completed
<input type="submit" value="View To Do"/><br>
<div ng-repeat = "toDo in toDoList">
<input type="radio" ng-model="tobeDeleted.deleteId"
value="{{toDo.id}}"/>
Task : {{toDo.name}}<br>
</div>
<input type="button" ng-click="deleteToDo()">Delete</button><br>
</form>
Using Dot Rule
//define model
$scope.tobeDeleted = {}; //then place deleted property here
//you could easily access `$scope.tobeDeleted.deletedId` inside a controller
Your $scope.deleteId Will be undefiend. Your function should have a parameter deleteId,change the function as
$scope.deleteToDo = function(deletId){
var url = "http://localhost:8080/webservice-4.0/rest/todo/delete/"+ deleteId;
$http.get(url)
.then(function(response) {
$scope.toDoList = angular.fromJson(response.data);
});
}
make sure you pass Id Inside the html also,
<input type="button" ng-click="deleteToDo(toDo.id)">Delete</button><br>
EDIT
Since your delete button is outside ng-repeat You should use dot operator with ng-model for the deleteId
define a $scope variable as,
$scope.deleteItem = {};
and your HTML as,
<div ng-repeat = "toDo in toDoList">
<input type="radio" ng-model="deleteItem.deleteId" value="{{toDo.id}}"/>
</div>
<input type="button" ng-click="deleteToDo()">Delete</button><br>
and your controller as,
$scope.deleteToDo = function(){
var url = "http://localhost:8080/webservice-4.0/rest/todo/delete/"+$scope.deleteItem.deleteId;
$http.get(url)
.then(function(response) {
$scope.toDoList = angular.fromJson(response.data);
});
}
My requirement: Have to reset my select boxes on button click
Example :-
I have 3 select boxes. When I click on the select box some different data will come and after that the result will get published. I added a Remove button which resets only its parent select box. Now, what I want to know is,how to reset all the three select box on clicking the remove button.
sample code is as under :-
<button ng-click="removeObj(key,model1,0)">Remove</span></button>
controller code is as under :-
scope.removeObj = function(modelID, subModelID, selectBoxPos) {
modelID = 0;
subModelID = 0;
})
I want on click of removeObj function all modelID data get reset to zero.
Please help.
As I understand you do not need any parameters.. only create a meaningful name resetModels:
AngularJS Controller:
$scope.resetModels = function() {
// Set default value to your models...
$scope.modelID = 0;
$scope.subModelID = 0;
});
Html:
<button ng-click="resetScpeModels()">Remove</span></button>
If you want to reset all the values. You should use it like this
$scope.model = {};
$scope.model.modelID = 0;
$scope.model.subModelID = 0;
<input ng-model="model.modelID"/>
If you want to reset it. Call again
$scope.model = {};
Inside ng-click function.
When you give a name to your form it automatically gets added to the $scope.
In angular we are having a $setPristine() method on the $scope.formName. which should recursively take care of resetting your form.
You can reset a form by, $scope.formName.$setPristine(); but if you're binding a model object to your inputs, you need to take care of clearing those too, ie:
$scope.formModel={}; or angular.copy({}, formModel);
Working demo :
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.Reset = function(formModel) {
angular.copy({}, formModel);
$scope.formModel = {};
$scope.submitForm.$setPristine();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="submitForm" ng-controller="myController">
<label for="first_field">First Model</label>
<input ng-model="formModel.firstModel" />
<br />
<label for="second_field">Second Model</label>
<input ng-model="formModel.secondModel" />
<br />
<button type="button" ng-click="Reset(formModel)">Reset</button>
</form>
</div>
I am using ng-repeat to create radio buttons for my form. The issue I am having is the value is not binding to the viewModel when an item is checked.
The name of my 'controller as' is 'request'.
<div class="form-group col-md-6" ng-repeat="type in request.serviceTypes">
<div class="form-wrapper">
<input type="radio" ng-checked="type.isChecked" class="form-control" name="serviceType" ng-value="{{type.name}}" ng-model="request.formData.serviceType">
<label for="serviceType" required class="check" ng-click="request.toggleServiceType(type.id)">{{type.name}}</label>
</div>
</div>
Has anyone encountered this issue before? For the record I have no problem binding to request.formData when using input type of text, this issue only occurs with radio's.
The toggle service function code is below
vm.toggleServiceType = function(id){
angular.forEach(vm.serviceTypes, function(serviceType, key){
if(serviceType.id === id){
serviceType.isChecked = true;
}else{
serviceType.isChecked = false;
}
});
};
I've added a plunkr here http://plnkr.co/edit/g2juiZZqFihfcduiOH9n?p=preview
I actually figured out the problem. Apparently for radio buttons with angularJS it does not use the ng-checked. It actually looks to see what the value of the model is.
What I did was modified the function to
request.toggleServiceType = function(name){
request.formData.serviceType = name;
};
The updated plunkr can be viewed here http://plnkr.co/edit/F5S5Jz7LAoBi40Zzjmx7?p=preview
I have the following HTML code:
<div ng-controller="DemoController">
<label class="list-group-item" ng-repeat="option in DesignOptions">
<input type="radio" name="optionsRadios" value="{{option[0]}}" />
{{option[1]}}</label>
<label class="list-group-item" ng-repeat="option in StyleOptions">
<input type="checkbox" value="{{option[1]}}">
{{option[2]}}
</label>
</div
And I have the following AngularJS code:
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('DemoController', function ($scope) {
var json = '{"Table":[[4,"Full"],[5,"Half"]],"Table1":[[4,1,"Elbow Patch"],[5,2,"Roll Up"]]}';
var obj = $.parseJSON(json);
$scope.DesignOptions = obj.Table;
$scope.StyleOptions = obj.Table1;
});
</script>
This gives me the following result:
Now, I need to display Elbow Patch checkbox only when Full radio button is selected. And Roll Up when Half radio button is selected. This is because, if you see obj.Table array, it has id of '4' for Full and obj.Table1 has id of '4' for Elbow Patch and so on.
I tried Angularjs - showing element based on a presence of id in array but could not modify it to work in my case as my array is very different.
Add a new property to your controller which will store the selected design option:
$scope.designOption = 4; // default to Full
Add the binding to this property in the view:
<input ng-model="$parent.designOption" type="radio" value="{{option[0]}}" />
Add an ng-show directive to the checkbox label:
<label ng-repeat="option in StyleOptions" ng-show='option[0] == designOption'>
I've removed the class and name attributes from the element just to make the code clearer.
NB Need to reference the $parent scope on the radio input as the ng-repeat directive will create a scope for each repeated element and javascript prototypical inheritance rules means that using just 'designOption' will create a designOption property on the child scope and not use the one in your controller.
I'm fairly new using AngularJS but I've been using for a pet project and I've run in to an issue. What I basically want to do is take the text input from this input field:
<form id="ci_search_form">
<p class="input-append"><label>Search:</label> <input type="text" id="query" ng:model="query" autofocus> <button ng:click="clearSearch()" class="btn"><i class="icon-remove"></i></button></p>
</form>
and update this input field's value with that value:
<div><input type="text" id="ciquery" ng:model="ciquery.Name"></div>
The second input filters some data and I can type in that directly and it works. However this page will have different sets of data, each with their own search input that I want updated by the master input at the top. I can't set value="" or use jQuery to set the value either, it just appears blank unless I explicitly type in that second input field. Can anyone assist with a solution?
EDIT
I thought I should include my app and controller code:
var App = angular.module('TicketAssistApp', []);
App.controller('SearchController', function($scope, $http, $filter){
$scope.query = '';
$http.get('static/ci_list.json').success(function(data){
$scope.ci_list = data;
});
$scope.clearSearch = function(){
$scope.query = '';
}
});
EDIT 2
Made some progress. Created a function that can be called an update ciquery in $scope:
var App = angular.module('TicketAssistApp', []);
App.controller('SearchController', function($scope, $http, $filter){
$scope.query = '';
$scope.ciquery = '';
$http.get('static/ci_list.json').success(function(data){
$scope.ci_list = data;
});
$scope.queryUpdate = function(){
$scope.ciquery = $scope.query;
}
$scope.clearSearch = function(){
$scope.query = '';
$scope.queryUpdate();
}
});
This works great. However, this creates another issue. Before in ciquery I was using ciquery.Name to filter only on the Name attribute. With this new solution I had to change it to this:
<div><input type="hidden" id="ciquery" ng:model="ciquery"></div>
This searches all fields in my data which returns unwanted results. Suggestions?
$scope and ng-model are differents. You should give ng-model's property to ng-click's function. Looks at this -> Ng-model does not update controller value
To update second input's field (here an example -> http://jsfiddle.net/yEvSL/1/)
<div><input type="text" id="ciquery" ng:model="query"></div>