i have a list of a few radio buttons and a input, and for some reason i can't get the selected radio value.
here is my example, or jsfiddle. If you look in the console and submit the form you can see that even if you select a radio button the response is undefined, but the input value comes in ok
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function ($scope) {
$scope.tests = [{
"id": "1"
}, {
"id": "2"
}, {
"id": "3"
}];
$scope.addResource = function (settings) {
console.log(settings);
};
});
})(SampleApp || (SampleApp = {}));
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<div>
<div ng-app="sampleApp" ng-controller="MainCtrl">
<ion-content style="display:block">
<form ng-submit="addResource(settings)">
<div class="list list-inset" ng-repeat="test in tests">
<ion-radio ng-model="settings.id" value="{{test.id}}">{{test.id}}</ion-radio>
</div>
<br/>
<div class="list" style="margin: 5px 10px;">
<label class="item item-input item-stacked-label"> <span class="input-label">Email</span>
<input type="text" ng-model="settings.email">
</label>
</div>
<button class="button button-positive">Save</button>
</form>
</ion-content>
</div>
</div>
You need to pre-initialize settings in your controller so that settings is not created inside the child scope if ng-repeat, instead it is inherited from controller scope, also use ng-value="test.id" instead of value=interpolation (value="{{test.id}}"), it binds the given expression to the value of your radio, so that when the element is selected, the ngModel of that element is set to the bound value.
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function ($scope) {
$scope.settings = {}; //Initialize model here
$scope.tests = [{
"id": "1"
}, {
"id": "2"
}, {
"id": "3"
}];
$scope.addResource = function () {
console.log($scope.settings);
};
});
})(SampleApp || (SampleApp = {}));
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<div>
<div ng-app="sampleApp" ng-controller="MainCtrl">
<ion-content style="display:block">
<form ng-submit="addResource()">
<div class="list list-inset" ng-repeat="test in tests">
<ion-radio ng-model="settings.id" ng-value="test.id">{{test.id}}</ion-radio>
</div>
<br/>
<div class="list" style="margin: 5px 10px;">
<label class="item item-input item-stacked-label"> <span class="input-label">Email</span>
<input type="text" ng-model="settings.email">
</label>
</div>
<button class="button button-positive">Save</button>
</form>
</ion-content>
</div>
</div>
Related
Hi all I am new to angularjs could anybody help me please? All what I need when I click a button the first checkbox in ng-repeat list to be checked. Am I doing anything wrong? Here is my code:
Checkbox
<fieldset class="top5">
<legend title="Categories"><span class="info blackLabelUpper"><b>Dish Categories</b><span class="TextCtrlReqBgImage"> </span></span></legend>
<span class="checkbox-list" ng-repeat="dishType in dishTypes">
<input type='checkbox' ng-click="toggleDishType(dishType)" ng-model="dishType.checked" value="{{dishType}}" ng-checked="selectedDish.Type.indexOf(dishType) > -1">
{{dishType}}<br />
</span>
</fieldset>
Button
<kendo-button id="btnNewDish" class="k-primary" ng-click="onNewDishClick(true)">
<i class="fa fa-plus fa-lg" aria-hidden="true"></i>New Dish
</kendo-button>
Function
scope.onNewDishClick = function (showNewDIshMessage) {
scope.dishTypes[0].dishType = true;
}
When you use ng-model on your inputs you don't need to use value to get result because ng-model save changes on self.
Feel free to ask question, and this sample maybe helps you.
var app = angular.module("app", []);
app.controller('ctrl', function($scope){
$scope.items = [
{somthing: false, title: 'a'},
{somthing: false, title: 'b'},
{somthing: false, title: 'c'},
{somthing: false, title: 'd'},
{somthing: false, title: 'e'}
]
$scope.checkAll = function(){
angular.forEach($scope.items, function(item){
item.somthing = !item.somthing;
});
}
$scope.checkFirstItem = function(){
$scope.items[0].somthing = !$scope.items[0].somthing;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.somthing">
{{item.somthing}}
{{item.title}}
</li>
</ul>
<button ng-click="checkAll()">check all</button>
<button ng-click="checkFirstItem()">check first item</button>
</div>
<div ng-repeat="restorent_type in restaurant_types" style="margin:5px;" class="col col-offset-10">
<label class="item item-radio radio-label {{restorent_type.RESCOD}}">
<input type="checkbox" name="group" ng-model="restorent.types" value="{{restorent_type.RESCOD}}" ng-click="filters.RESCOD = restorent_type.RESCOD" ng-checked="$first">
<div class="item-content">
{{restorent_type.RESCOD}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
Or you can use the :
ng-model="dishType.checked" ng-init="dishType.checked=true"
I think the Function definition should be like this :
scope.onNewDishClick = function (showNewDIshMessage) {
scope.dishTypes[0].checked = true;
}
I want to display checkboxes inside ng repeat. The checkboxes are not displayed. The checkboxes are not displayed at all. I am not understanding what the misatke is. Here is the code -
<div class = "col s4">
<form ng-submit="$ctrl.todoAdd()">
<input type="text" ng-model="$ctrl.todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
</form>
<br>
<div ng-repeat="x in $ctrl.todoList">
<input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>
<p><button ng-click="$ctrl.remove()">Remove marked</button></p>
</div>
And the javascript code-
angular.
module('dashboard').
component('dashboard', {
templateUrl: 'dashboard/dashboard.html',
controller: ['$routeParams','$http',
function dashboardController($routeParams,$http) {
this.todoList = [{todoText:'Clean House', done:false}];
this.todoAdd = function() {
this.todoList.push({todoText:this.todoInput, done:false});
this.todoInput = "";
};
this.remove = function() {
var oldList = this.todoList;
this.todoList = [];
angular.forEach(oldList, function(x) {
if (!x.done) this.todoList.push(x);
});
};
//Rest of the controller code
}
]
});
You need to have empty dependencies passed to your module while declaring,
change it as,
angular.
module('dashboard',[]).
DEMO
var app = angular.module('myFirstApp', []);
app.controller('myCtrl', function () {
this.todoList = [{
"todoText": "run today",
"done": false
},
{
"todoText": "read today",
"done": false
}];
});
<html>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myCtrl as ctrl">
<div ng-repeat="x in ctrl.todoList">
<input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>
</div>
</body>
</html>
I am new to Angular JS, I created a div with input elements and I didn't use ng-model for input boxes.
<div class="row">
<br>
<div class="col-sm-10" id="rankingForm" >
<p ng-repeat=" x in $ctrl.outputProductAttributeValueList">
{{x}} <input type="text" />
</p>
<br>
<button type="submit" ng-click="$ctrl.onRankingFormSubmit()"> SUBMIT</button>
</div>
</div>
When I click on submit button I have to access all input values .Please help me how to do that .. I tried as below.
angular.module("productList")
.component("productList",{
templateUrl : "product-list/product-list.template.html",
controller : ["$http" ,"$scope","$document",function productListController($http,$scope,$document){
var self = this;
self.outputProductAttributeValueList =[ "age", "gender","all"];
self.onRankingFormSubmit = function () {
var queryResult = $document[0].getElementById("rankingForm")
console.log(queryResult);
// HERE queryResult is printing how to proceed further
};
}]
});
Now I want to collect all those input values dynamically created by ng-repeat. Please tell me how to do that ?
AngularJS ngModel is the standard approach for binding the view into the model instead of interacting directly with the DOM.
You can get all the inputs within the div id="rankingForm" you can do:
var inputs = $document[0]
.getElementById('rankingForm')
.getElementsByTagName('input');
Or by using Document.querySelectorAll():
var inputs = $document[0].querySelectorAll('#rankingForm input');
Once you have the inputs than iterate over all of them to get the values.. Notice that I have added attribute name to the inputs:
Code whitout ngModel:
angular
.module('App', [])
.controller('AppController', ['$scope', '$document', function ($scope, $document) {
$scope.outputProductAttributeValueList = ['age', 'gender', 'all'];
$scope.onRankingFormSubmit = function () {
var inputs = $document[0].querySelectorAll('#rankingForm input');
inputs.forEach(function(input) {
console.log(input.name + ': ' + input.value);
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController" class="row">
<br>
<div class="col-sm-10" id="rankingForm" >
<p ng-repeat="x in outputProductAttributeValueList">
{{x}} <input type="text" name="{{x}}" />
</p>
<br>
<button type="submit" ng-click="onRankingFormSubmit()">SUBMIT</button>
</div>
</div>
Code with ngModel:
angular
.module('App', [])
.controller('AppController', ['$scope', '$document', function ($scope, $document) {
$scope.outputProductAttributeValueList = ['age', 'gender', 'all'];
// Model inputs
$scope.inputs = {};
$scope.onRankingFormSubmit = function () {
$scope.outputProductAttributeValueList.forEach(function(input) {
// Access to model inputs: $scope.inputs[input]
console.log(input + ': ' + $scope.inputs[input]);
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController" class="row">
<br>
<div class="col-sm-10" id="rankingForm" >
<p ng-repeat="x in outputProductAttributeValueList">
{{x}} <input type="text" ng-model="inputs[x]" />
</p>
<br>
<button type="submit" ng-click="onRankingFormSubmit()">SUBMIT</button>
</div>
</div>
I'm trying to make a little app in ionic, but it gave me that error when i call the $scope.saveClass() function from the UI.
Unable to get property 'subject' of undefined or null reference
I don't understand because he doesn't work. Premise: i'm new to ionic/angularjs developing.
I thank you in advance for helping
code (www/js/controllers.js)
angular.module('starter.controllers')
.service("DB", function() {
this.classDB = new PouchDB("classesDB");
})
.controller("AddClassCtrl", function ($scope, DB) {
$scope.saveClass = function () {
var newclass = {
"_id": $scope.class.subject,
"subject": $scope.class.subject,
"room": $scope.class.room
}
DB.classDB.put(newclass);
window.location.href = '#app/schedule'
};
})
Code (add-class.html)
<ion-content controller="AddClassCrtl">
<div class="list">
<!--Select the subject-->
<label class="item item-input item-select">
<div class="input-label">
Subject
</div>
<button class="button button-block button-positive overflowShow"> Add a subjects </button>
<select class="item-input" ng-model="class.subject" ng-selected="class.subject">
<option ng-repeat="subject in subjects">{{subject}}</option>
</select>
</label>
<!--Insert the room number-->
<label class="item item-input item-stacked-label">
<input type="text" placeholder="Room" ng-model="class.room" ng-text-change="class.room">
</label>
<div class="item">
<button ng-click="discardClass()" class="button button-block">Discard</button>
<button ng-click="saveClass()" class="button button-block">Save</button>
</div>
</div>
</ion-content>
It's probably because you didn't initialize $scope.class variable and in fact, when you try to access $scope.class.subject, $scope.class is undefined. Add this code at the beginning of your controller:
$scope.class = {};
On my page I'm rendering the form based on api call. With help couple filters I'm hiding all elements which have 'id' in title and which equal 0, but I need to display initial element Id. I would used '$first' but the first element is checkbox value, so how can it be done? I appreciate for any help. applied plunk
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.upload = function (){
$scope.rowKeys = Object.keys($scope.rowData);
};
});
app.filter('hide', function () {
return function(input, arg) {
return input.replace(arg, '');
};
})
html
<form style="padding: 15px">
<button class="btn btn-default" ng-click="upload()">Upload</button>
<div class="form-group row">
<div ng-repeat="k in rowKeys | filter: '!id' | filter: '!0'" ng-model="rowValue">
<label for="rowValue" class="col-sm-2">{{k | hide:'.name'}}:</label>
<div class=" col-sm-2">
<input class="form-control rowValue" id="rowValue" value="{{rowData[k]}}" />
</div>
</div>
</div>
<button type="submit" class="btn btn-default" ng-if="rowData" ng-disabled="!rowValue">Submit</button>
</form>
You can make use of ng-if for this:
<div ng-repeat="thing in things">
<div ng-if="(thing === 'id' || thing.toLowerCase().endsWith('id') === false) ? true : false">
{{thing}}
</div>
</div>