I need to change ng-Disabled value for one separate input which i show by ng-repeat directive.
I have:
<li ng-repeat="lang in langs">
<label> <input
type="radio"
name="language"
ng-disabled="isDisabled"
ng-model="langs.name"
ng-value="$index"
ng-change="getIndex($index)"
/>
<span> {{lang.name}} </span>
</label>
</li>
How to do something like that:
$scope.langs[0].ngDisabled = true;
Thanks.
You could allow a property 'isDisabled' to be added to your model:
<li ng-repeat="lang in langs">
<label> <input
type="radio"
name="language"
ng-disabled="lang.isDisabled"
ng-model="lang.name"
ng-value="$index"
ng-change="getIndex($index)"
/>
<span> {{lang.name}} </span>
</label>
</li>
Then you can do:
$scope.langs[0].isDisabled = true;
Alternatively, if you don't want to mutate your model, you could do the following instead:
Controller:
var app = angular.module("app", []);
app.controller('Ctrl', function ($scope) {
$scope.isDisabled = {};
$scope.langs = [
{ name: 'French' },
{ name: 'English' },
{ name: 'German' },
{ name: 'Chinese' },
{ name: 'Dutch' }
];
});
HTML
<body ng-app="app" ng-controller='Ctrl as ctrl'>
<ul>
<li ng-repeat="lang in langs">
<label>
<input
type="radio"
name="language"
ng-disabled="isDisabled[lang.name]"
ng-model="ctrl.selectedLanguage"
ng-value="lang.name"
/>
<span> {{lang.name}} </span>
</label>
</li>
</ul>
<br />
{{ ctrl.selectedLanguage }} <br />
{{ isDisabled }}
</body>
Then you can do:
$scope.isDisabled[$scope.langs[0].name] = true;
Plunker Demo
Related
I am having trouble finding a solution that allows me to simply uncheck all checkboxes using AngularJS. I use a simple ng-repeat to make checkboxes and want a button to clear them all.
<div class="form-group"> <!-- Checkbox Group !-->
<label class="control-label">What are your requirements</label>
<div class="checkbox" ng-repeat="block in blocks">
<label>
<input type="checkbox" ng-model='myModel' name="block" value="block" ng-change="filter(block)">
{{block}}
</label>
</div>
</div>
<div>
<input type="button" class="btn btn-primary " name="Clear" ng-click="reset()" value="Reset"> </input>
</div>
I have tried altering the ng-model a few times, but keep getting errors since I use the ng-change function. Is there any way I can make a function called reset() in the controller to clear all the checkboxes (even if it is in a for loop iterating through each one by name)?
For referense
$scope.blocks = ["Lambda","Tokenization","Hadoop"];
<div ng-controller="checkboxController">
<ul>
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
</ul>
<input type="button" value="UnCheck All" ng-click="checkAll(Items.length)" />
</div>
var app=angular.module("CheckAllModule", []);
app.controller("checkboxController", functioncheckboxController($scope) {
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function (Count) {
angular.forEach($scope.Items, function (item) {
item.Selected = false;
});
};
});
Check with this.I think this will help you
Demo Link
Try this method.
var app = angular.module('plunker', []);
app.controller('mainCtrl', function($scope) {
$scope.blocks = ["Lambda","Tokenization","Hadoop"];
$scope.checkBlocks = [];
$scope.filter = function(b){
}
$scope.reset= function(){
$scope.checkBlocks = [];
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="mainCtrl">
<div class="form-group"> <!-- Checkbox Group !-->
<label class="control-label">What are your requirements</label>
<div class="checkbox" ng-repeat="block in blocks">
<label>
<input type="checkbox" ng-checked="checkBlocks[block]" ng-model='checkBlocks[block]' name="block" value="block" ng-change="filter(block)">
{{block}}
</label>
</div>
</div>
<div>
<input type="button" class="btn btn-primary " name="Clear" ng-click="reset()" value="Reset"> </input>
</div>
</body>
I have the following example (jsFiddle). What I will do is, if radiobuttons are clicked than all checkboxes should be deselected and if one or more checkboxes are clicked than all radiobuttons should be deselected.
My question now would be how to make this (in a simple way).
angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
$scope.select = function(type) {
alert('type: ' + type);
}
// functions to deselect checkboxes if a radiobutton is selected and vica verse
}]);
thanks a lot for help!
My Example
I can suggest using ng-checked documentation.
You can check this fiddle.
<body ng-app="myApp">
<div ng-controller="TestController">
<ul class="list-group">
<li class="list-group-item">
<input type="radio" name="test1" ng-checked="radio" ng-click="selectRadio()"/>
<span class="username">
Alle von Test1
</span>
</li>
<li class="list-group-item">
<input type="radio" name="test1" ng-checked="radio" ng-click="selectRadio()"/>
<span class="username">
Alle von Test2
</span>
</li>
</ul>
<input type="checkbox" value="Test3" ng-checked="check" ng-click="selectCheck()" />Test3<br />
<input type="checkbox" value="Test4" ng-checked="check" ng-click="selectCheck()" />Test4<br />
<input type="checkbox" value="Test5" ng-checked="check" ng-click="selectCheck()" />Test5<br />
</div>
</body>
I am a little bit late to answer your question. I think this is what you are looking for.
JSFiddle: https://jsfiddle.net/bx79afyq/2/
HTML:
<div ng-controller="TestController">
<ul class="list-group">
<li class="list-group-item">
<input type="radio" name="test1" ng-click="select('radio')"/>
<span class="username">
Alle von Test1
</span>
</li>
<li class="list-group-item">
<input type="radio" name="test1" ng-click="select('radio')"/>
<span class="username">
Alle von Test2
</span>
</li>
</ul>
<input type="checkbox" value="Test3" ng-click="select('checkbox')" />Test3<br />
<input type="checkbox" value="Test4" ng-click="select('checkbox')" />Test4<br />
<input type="checkbox" value="Test5" ng-click="select('checkbox')" />Test5<br />
</div>
JavaScript
angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
$scope.select = function(type) {
var data = angular.element('input');
if(type==='radio'){
angular.forEach(data, function(value, key) {
if(value.type==='checkbox' && angular.element(value).prop("checked")){
angular.element(value).prop("checked", false);
}
});
}
else if(type==='checkbox'){
angular.forEach(data, function(value, key) {
if(value.type==='radio' && angular.element(value).prop("checked")){
angular.element(value).prop("checked", false);
}
});
}
}
}]);
I would suggest using models for your inputs in your JavaScript like this:
angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
this.radioBtns = {
test1: false,
test2: false
}
this.checkboxBtns = {
test3: false,
test4: false,
test5: false
}
this.deselect = function(type) {
angular.forEach( this[ type ], function( el,name ) {
this[ type ][ name ] = false;
}.bind(this));
}
}]);
And after that adjust html accordingly as shown in the fiddle:
https://jsfiddle.net/zz5z6dor/11/
I get the correct record from the firebase array using the $getRecord but I can not save the changes made in the input fields. Our Add Controller works. What have we done wrong? Can anyone help? Thank you!
Edit Controller
app.controller("EditRecipeController", function($scope, $location, $routeParams, $firebaseArray) {
$scope.recipes.$loaded().then(function(recipeid) {
$scope.recipe = recipeid.$getRecord($routeParams.id);
$scope.editRecipe = function(recipe) {
$scope.recipes.$save(recipe).then(function() {
})};});});
Add Controller
app.controller("AddRecipeController", ["$scope", "createRecipes", function($scope, createRecipes) {
$scope.recipes = createRecipes;
$scope.addRecipe = function() {
$scope.recipes.$add({
title: $scope.title,
lead: $scope.lead,
keyword: $scope.keyword,
ingredient: $scope.ingredient,
instructions: $scope.instructions
});
alert("Your recipe has been succefully saved!")
// reset the recipe input
$scope.recipe = "";
};}]);
Factory
app.factory("createRecipes", ["$firebaseArray",function($firebaseArray) {
var ref = new Firebase("https://fiery-inferno-8595.firebaseio.com/recipes/");
return $firebaseArray(ref);}]);
HTML
<section id="{{recipe.$id}}" class="recipe-description editor">
<form ng-submit="addRecipe()">
<section class="headColumn">
<div class="mySearch">
<span>My search: </span>
<span ng-bind="search.$"></span>
</div>
<h2>
<input type="text" ng-model="title" name="recipeTitle" ng-value="recipe.title" required="">-
<input type="text" ng-model="lead" name="recipeLead" ng-value="recipe.lead" required="">
</h2>
<ul class="keywords">
<li><label></label>Categories: </li>
<li ng-repeat="keyword in keywords track by $index">
<input type="text" ng-model="keywords[$index]" name="recipeKeyword" ng-value="recipe.keywords" placeholder="Add a keyword">
<button class="remove-field" ng-show="$last" ng-click="removeKeyword()">-</button>
</li>
<button class="add-field" ng-click="addKeyword()">+</button>
</ul>
</section>
<section class="sideColumn">
<h4>Ingredients</h4>
<ul class="ingredients">
<li ng-repeat="ingredient in ingredients track by $index">
<input type="text" ng-model="ingredients[$index]" name="recipeIngredient" ng-value="recipe.ingredients" placeholder="Add an ingredient">
<button class="remove-field" ng-show="$last" ng-click="removeIngredient()">-</button>
</li>
<button class="add-field" ng-click="addIngredient()">+</button>
</ul>
</section>
<section class="mainColumn">
<div class="readytime">
<h4>Time until ready</h4>
<ul>
<li>
<span>Preperation Time: </span>
<input type="text" ng-model="preptime" name="recipePreptime" ng-value="recipe.preptime" placeholder="Add preperation Time">
</li>
<li>
<span>Cooking Time: </span>
<input type="text" ng-model="cookingtime" name="recipeCookingtime" ng-value="recipe.cookingtime" placeholder="Add cooking Time">
</li>
</ul>
</div>
<div class="instructions">
<h4>Instructions</h4>
<!--TO DO: This input should work like textarea -->
<input type="text" ng-model="instructions" name="recipeInstructions" ng-value="recipe.instructions">
</div>
</section>
<button ng-click="addRecipe()" ng-hide="recipe" type="submit">Save the Recipe</button>
<button ng-click="editRecipe()" type="submit" ng-show="recipe">Update the Recipe</button>
</form>
You're edit function:
$scope.editRecipe = function(recipe){
$scope.recipes.$save(recipe).then(function(){});
}
is expecting the "recipe" to be passed in, but I don't see it being passed in anywhere. It looks like you are saving the current recipe to:
$scope.recipe
so if $scope.recipe has the correct object, I think you just have to save the scoped recipe opposed to passing it in.
$scope.editRecipe = function(){
$scope.recipes.$save($scope.recipe).then(function(){});
}
I am getting some odd behavior when I update the array that a repeater is using from a $watch
This is the HTML
<section data-ng-controller="JobsController">
<div class="page-header">
<h1>New Job</h1>
</div>
<div class="col-md-12">
<form class="form-horizontal" data-ng-submit="create()" novalidate>
<fieldset>
<div class="form-group" data-ng-controller="DisciplinesController" data-ng-init="find()">
<h3>Discipline</h3>
<div>
<!--clicking these will filter -->
<label class="form-control" data-ng-repeat="discipline in disciplines">
<input type="checkbox" checklist-model="$parent.dl" checklist-value="discipline"> {{discipline.name}}
</label>
</div>
</div>
<!--this is the updated list -->
<div class="form-group">
<h3>Roles</h3>
<div>
<label class="form-control" data-ng-repeat="role in selectedDisciplineRoles">
<input type="checkbox" checklist-model="roleList" checklist-value="role"> {{role.name}}
</label>
</div>
</div>
<div class="form-group">
<h3>What "Job" are they trying to do?</h3>
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="name" id="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default">
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
What I am trying to do is have this model filter on the server and have the client update with the appropriate values
'use strict';
// Jobs controller
angular.module('jobs').controller('JobsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Jobs', 'RolesAPI',
function($scope, $stateParams, $location, Authentication, Jobs, RolesAPI) {
$scope.authentication = Authentication;
$scope.$watchCollection("dl", function(){
var activeDisciplineIds = _.pluck($scope.dl, "_id");
$scope.selectedDisciplineRoles = [];
RolesAPI.getByDisciplineIds(activeDisciplineIds)
.success(function(data){
$scope.selectedDisciplineRoles = data;
console.log($scope.selectedDisciplineRoles)
}
);
});
}
]);
I don't see any duplicates on the return, however when i click on the checkbox there is a quick duplication of the all the active results, and then the duplicates disappear.
I am open to creating an angualar filter but wasn't able to get it working. Here is the data that I am dealing with.
[
{
_id: "547d2ad8b62d3f8bfaf139f8",
user: {
_id: "547648f95413b30000a03e21"
},
base: "547956b0824679a54c9142d2",
__v: 0,
created: "2014-12-02T02:58:32.422Z",
disciplines: [
"5476625147bd3200004bae00"
],
name: "item 1"
},
{
_id: "547d0012b62d3f8bfaf139f7",
user: {
_id: "547648f95413b30000a03e21"
},
base: "547956a6824679a54c9142d1",
__v: 0,
created: "2014-12-01T23:56:02.427Z",
disciplines: [
"5476616347bd3200004badfb",
"547661cb47bd3200004badfd"
],
name: "item 2"
},
{
_id: "547cfea6b62d3f8bfaf139f6",
user: {
_id: "547648f95413b30000a03e21"
},
base: "547956a6824679a54c9142d1",
__v: 0,
created: "2014-12-01T23:49:58.885Z",
disciplines: [
"547661cb47bd3200004badfd",
"5476616347bd3200004badfb"
],
name: "item 3"
}
]
The filtering needs to happen based on a match of an array of ids, and those in the disciplines array of the object.
so something like
["5476616347bd3200004badfb", "547661cb47bd3200004badfd"]
would return item 1 and item 3, not item 2
I ended up getting the filter working like this.
'use strict';
angular.module('roles').filter('rolesByDiscipline', [
function() {
return function(roles, disciplineIds) {
return roles.filter(function(role) {
for (var i in role.disciplines) {
if (_.pluck(disciplineIds, "_id").indexOf(role.disciplines[i]) != -1) {
return true;
}
}return false;
});
};
}
]);
HTML
<div class="form-group" data-ng-controller="RolesController" data-ng-init="find()">
<h3>Roles</h3>
<div>
<label class="form-control" data-ng-repeat="role in roles | rolesByDiscipline:$parent.dl">
<input type="checkbox" checklist-model="roleList" checklist-value="role"> {{role.name}}
</label>
</div>
</div>
Template for form submission. This page will display the form template. Initially it shows the TItle,Full Name. On clicking the 'Add Tags' link new input fields is been generated for entering tags.
On submit, the field input(story.tag) is not been included on RequestPayload
<form novalidate ng-submit="save()">
<div>
<label for="title">Title</label>
<input type="text" ng-model="story.title" id="title" required/>
</div>
<div>
<label for="firstName">Full Name</label>
<input type="text" ng-model="story.fullname" id="fullname" required/>
</div>
<div ng-controller="Note" >
<div ng-repeat="story in items ">
<label>Tag {{$index+1}}:</label>
<input type="text" ng-model="story.tag" id="tag" required/>
</div>
<a ng-click="add()">Add Tags</a>
</div>
<button id="save" class="btn btn-primary">Submit Story</button>
</form>
script :- app.js
angular.module("getbookmarks", ["ngResource"])
.factory('Story', function ($resource) {
var Story = $resource('/api/v1/stories/:storyId', {storyId: '#id'});
Story.prototype.isNew = function(){
return (typeof(this.id) === 'undefined');
}
return Story;
})
.controller("StoryCreateController", StoryCreateController);
function StoryCreateController($scope, Story) {
$scope.story = new Story();
$scope.save = function () {
$scope.story.$save(function (story, headers) {
toastr.success("Submitted New Story");
});
};
}
//add dynamic forms
var Note = function($scope){
$scope.items = [];
$scope.add = function () {
$scope.items.push({
inlineChecked: false,
tag: "",
questionPlaceholder: "foo",
text: ""
});
};
}
The story object inside ng-repeat is in another scope. This JSFiddle should do what you are looking for.
<div ng-app>
<div ng-controller="NoteCtrl">
<form novalidate ng-submit="save()">
<div>
<label for="title">Title</label>
<input type="text" ng-model="story.title" id="title" required/>
</div>
<div>
<label for="firstName">Full Name</label>
<input type="text" ng-model="story.fullname" id="fullname" required/>
</div>
<div ng-repeat="story in items">
<label>Tag {{$index+1}}:</label>
<input type="text" ng-model="story.tag" required/>
</div> <a ng-click="add()">Add Tags</a>
<button id="save" class="btn btn-primary">Submit Story</button>
</form>
<div ng-repeat="test in items">
<label>Tag {{$index+1}}: {{test.tag}}</label>
</div>
</div>
</div>
The NoteController:
function NoteCtrl($scope) {
$scope.story = {};
$scope.items = [];
$scope.story.tag = $scope.items;
$scope.add = function () {
$scope.items.push({
inlineChecked: false,
tag: "",
questionPlaceholder: "foo",
text: ""
});
console.log($scope.story);
};
}