Dynamically Adding inputs in Angular 1.3.16 - javascript

My Code is simple and as I searched on net, I guess it is because of angular 1.3.x
I am trying to create dynamic inputs and want to get the value in an array.
HTML:
<div class="row" ng-repeat="item in designFormData.perInstallments track by $index">
<div class="col-md-5">
<label for="">Installment #{{item.sn}}</label>
</div>
<!-- /.col-xs-6 col-sm-4 -->
<div class="col-md-7">
<input type="number" class="form-control" id="" autocomplete="off" ng-model="item.price">
</div>
<!-- /.col-xs-6 col-sm-4 -->
</div>
JS:
for (var i = 0; i < noOfInstallments; i++) {
$scope.designFormData.perInstallments.push({
sn: i+2,
price: ""
});
}
Problem:
The price is not reflecting in perInstallments
designFormData{
perInstallments:
[
{
sn: 2,
price: ""
},
{
sn: 2,
price: ""
}
]
}
values, instead of appearing in perInstallments items, are appearing in child scope of ng-repeat. how to solve this. I have tried adding track by $index as you can see.
Any suggestions.

Related

Show div tag when selecting an option | Angular1

I want to show a div tag when selecting a specific option. I am developing this with Angular and Ionic 1. I've been searching around for a while now, but I can't find any answers that works for me, therefore I'm writing this. I want to display the second option (id number 2), but I can't get it to work.
Here's the HTML:
<div class="row row-white">
<div class="col col-white">
<label>
<select name="keys" ng-options="key.name for key in list" ng-change="myCtrl()" ng-model="testValue" class="select-input" style="margin-left:0px;">
<option ng-if="false"></option>
<option ng-value=""></option>
<option ng-value=""></option>
</select>
</label>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white" ng-show="result"> <!-- Won't display!! -->
<div class="col col-white">
<input type="number">
</div>
</div>
And here's the JS:
$scope.list = [{
"id": 1,
"name": "Engångsnyckel"
}, {
"id": 2,
"name": "Fleragångsnyckel"
}]
$scope.myCtrl = function() {
if ($scope.testValue.id == "2") {
$scope.result = true
}
else {
$scope.result = false
}
}
// Sets the first index as placeholder
$scope.testValue = $scope.list[0]
Sorry if this is a dumb and obvious question, but I'm getting desperate.
I hope this will help. You can directly use the data binding property without depending on any functions for the static conditions.
function TodoCtrl($scope) {
$scope.list = [{
"id": 1,
"name": "The Id One"
}, {
"id": 2,
"name": "The Id Two"
}]
// Sets the first index as placeholder
$scope.testValue = $scope.list[0]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<div class="row row-white">
<div class="col col-white">
<label>
<select name="keys" ng-options="key.name for key in list" ng-model="testValue" class="select-input" style="margin-left:0px;">
<option ng-if="false"></option>
<option ng-value=""></option>
<option ng-value=""></option>
</select>
</label>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white" ng-show="testValue.id==2"> <!-- Won't display!! -->
<div class="col col-white">
<input type="number" placeholder="Enter the number here">
</div>
</div>
</div>
</div>
Your comparison should be with a number
$scope.myCtrl = function() {
if ($scope.testValue.id == 2) {
$scope.result = true
}
else {
$scope.result = false
}
}
It's nice to use track by too in your
<select name="keys" ng-options="key as key.name for key in list track by key.id" ng-change="myCtrl()" ng-model="testValue" class="select-input" style="margin-left:0px;">
</select>

How to hide content with ng-if and a checkbox that's inside a ng-repeat and it's ng-model is an array

I have a list of checkboxes that are created using a ng-repeat, I use those checkboxes to get the IDs of the objects that are inside a list, these objects have a name property and a id property.
this is a object inside my categoryList
category = {
idCategory: 2,
name: 'myName'
};
And this is how I declare my checkboxes.
<div class="form-group">
<label>Select a category</label>
<label class="checkbox-inline" ng-repeat="category in categoryList">
<input type="checkbox" ng-model="idsCategory[category.idCategory]"> {{category.name}}
</label>
</div>
and then in my controller I get the ids like this
var categories= $scope.categoryList;
var idsSelected = [];
//get selected ids
for (var idCategory in categories) {
if (categories.hasOwnProperty(idCategory )) {
if (categories[idCategory ] === true) {
idsSelected .push(idCategory);
}
}
}
but now I want to hide and show some inputs in my HTML, if the user selects a category like "support" I want to show some inputs, but I don't know what condition put inside my ng-if since I declare my checkboxes ng-model like an array of ids like this ng-model="idsCategory[category.idCategory]"
how can I put my ng-if to hide the inputs I tried this but this doesn't work
<div id="b" ng-if="idsCategory.category.name=='Support'">
<div class="form-group">
<label>Support hours:</label>
<input class="form-control" placeholder="support houres">
</div>
</div>
Edited:
If we have HTML:
<div class="form-group">
<label>Select a category</label>
<label class="checkbox-inline" ng-repeat="category in categoryList">
<input type="checkbox" ng-model="idsCategory[category.idCategory]"> {{category.name}}
</label>
</div>
Conroller:
$scope.idsCategory = {};
$scope.categoryList = [{
idCategory: 1,
name: 'categoryA'
}, {
idCategory: 2,
name: 'recreation'
}, {
idCategory: 3,
name: 'develop'
}, {
idCategory: 4,
name: 'Support'
}];
Then we can use following ng-show:
<div id="b" ng-show="idsCategory[4]">
<div class="form-group">
<label>Support hours:</label>
<input class="form-control" placeholder="support houres">
</div>
</div>
See jsfiddle
In checkbox input we have ng-model="idsCategory[category.idCategory]", so idsCategory[4] stores info if category with idCategory = 4 is checked. That's why element with ng-show="idsCategory[4]" will be shown if category with idCategory = 4 is checked.

ng-disabled in Angular validation not working as expected

http://plnkr.co/edit/9Yq6aZHtKCuZMtPbjBIN?p=preview
I've tried and tried to get this to work but I've had no luck. I'm trying to disable the submit button using angularJS and the built in validation function. What I find is that when you first load the form, the submit button is active--not disabled!
I've tested and tried and I've found that my validation code accepts an empty string / null string in the Team Name, despite me requiring the input.
Does anyone know how to format this correctly? The ONLY way I've gotten it to work is to fudge the data with replacing an empty string with a single space...in production this is unacceptable...
Here is the index.html:
<body ng-controller="EnterController as enter">
<div class="panel panel-primary">
<div class="panel-body">
<form name="enterFormNew" ng-submit="enter.TeamNameNext()" autocomplete="off" novalidate>
<div class="row">
<div class="col-xs-8 col-md-6">
<div class="form-group">
<label for="teamname">Team Name</label>
<input name="TeamName" ng-required ng-minlength="2" ng-maxlength="40" ng-model="enter.Team.Name" type="text" id="teamname" class="form-control" />
<p ng-show="enterFormNew.TeamName.$touched && enterFormNew.TeamName.$invalid">This is not a valid team name.</p>
</div>
<div class="form-group">
<label for="division">Division</label>
<select name="selectDivision" ng-required ng-model="enter.Team.Division" id="division" class="form-control" ng-options="division.Name for division in enter.Divisions track by division.Id ">
<option value="">Select...</option>
</select>
<p ng-show="enterFormNew.selectDivision.$touched && enterFormNew.selectDivision.$invalid">A valid Division needs to be selected.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<button type="submit" class="btn btn-primary" ng-disabled="enterFormNew.$invalid">Next</button>
</div>
</div>
</form>
</div>
</div>
</body>
And here is the app.js:
angular.module('Enter', [])
.controller("EnterController", [
function() {
this.RegistrationPhase = 0;
this.Divisions = [{ Id: 1,Name: "Normal"}, {Id: 2,Name: "Not Normal"}];
this.Team = { Name: "", ResumeKey: null, Division: { Id: -1 }, Players: []};
this.TeamNameNext = function() {
//Code removed
alert("Made it to the submit function!")
};
}
]);
the attribute ng-required requires a value. Don't get confused with HTML5 attribute required that doesn't require a value.
ng-required="true"
Because "Team.Division" is not undefined in your controller code.
If you could use the code below, you will get what you extected.
this.Team = { Name: "", ResumeKey: null, Division: undefined, Players: []};
You can use null or "" instead of undefined.

angularjs ng-repeat determine what item is clicked

Im loading objects into clickable boxes using ng-repeat.
now i want to return the objects title when the user has clicked its item-box
normally i would put it in a ng-model but since im using ng-repeat the model will be reused in every created box...
i am searching for a way to check the selected objects title. and put it in a ng-model for re-use later on.
code now:
creation of object boxes in html:
<div class="row form-group product-chooser">
<a href="#drop">
<div id="catagories" ng-repeat="catagories in main.catagories" class="col-xs-12 col-sm-12 col-md-4 col-lg-4" value="{{catagories.title}}">
<div class="product-chooser-item">
<img src="{{catagories.image}}" class="img-rounded col-xs-4 col-sm-4 col-md-12 col-lg-12" alt="Catagories">
<div class="col-xs-8 col-sm-8 col-md-12 col-lg-12">
<span class="title">{{catagories.title}}</span>
<span class="description">{{catagories.description}}</span>
<input type="radio" name="product" value="{{catagories.title}}">
</div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<P>selected is: {{main.CreateProject.ProjectCatagorie}}</P>
contoller js file:
// objects
vm.catagories = [
{
id: 1,
title: 'Mobile and Desktop',
description: 'Full concept design to complete App',
image: '../img/Project/desktop_mobile.png'
},
{
id: 2,
title: 'Desktop',
description: 'Blogs, Webshops, complete full back-end Web-Apps',
image: '../img/Project/desktop.png'
},
{
id: 3,
title: 'Mobile',
description: 'Mobile websites, Apps for Android and/or IOS',
image: '../img/Project/mobile.png'
}
];
//javascript to put the checked prop on the checked box:
//works
$(function(){
$('div.product-chooser').find('div.product-chooser-item').on('click', function(){
// remove selected class form all
$(this).parent().parent().find('div.product-chooser-item').removeClass('selected');
// put checked
$(this).addClass('selected');
$(this).find('input[type="radio"]').prop("checked", true);
// get seleciton
if ($('input[type=radio]:checked').length > 0) {
// do something here
alert($('input[type=radio]:checked').val());
}
// set rest disabled
$('div.product-chooser').not('.selected').addClass('disabled');
});
});
vm.CreateProject = function(){
// selected catagorie
//fails
ProjectCatagorie = $('input[type=radio]:checked').val();
// this model is in the function: CreateProject within the maincontroller.
// function doesnt end here...
You can for example add ngClick directive on every checkbox, and set main.CreateProject.ProjectCatagorie directly:
<input type="radio" name="product" ng-click="main.CreateProject.ProjectCatagorie = catagories">
Demo: http://plnkr.co/edit/awn63n7f1YBO5mOUMLDT?p=preview
ng-repeat does create a new child scope. The trick is to wrap the ng-model value in a object defined in the parent scope and everything works as expected.
<div ng-repeat="catagory in catagories">
<input type="radio" ng-model="selection.catagory" name="product" ng-value="catagory">
</div>
function myCtrl($scope) {
$scope.selection = {catagory : null};
$scope.catagories = [
{
id: 1,
title: 'Mobile and Desktop',
},
{
id: 2,
title: 'Desktop',
},
{
id: 3,
title: 'Mobile',
}
];
}
See https://fiddle.jshell.net/nbg58dto/

AngularJS I am trying to calculate the result of many inputs (ng-model) included inside nested ng-repeat

I'm learning AngularJS and I'm trying to create a simple inventory control program for several products. I've been googling for a couple hours and browsed many questions but have not quite been able to get my code to work.
The formula that should be calculated for each product is:
Final inventory = Initial Inventory + Production - Sales
Here is the code: http://codepen.io/swordf1zh/pen/zfwcB
HTML
<div ng-app="inventory">
<form role="form" class="row" ng-controller="ProdCtrl">
<!-- Secciones -->
<div class="col-md-3" ng-repeat="section in sections">
<blockquote class="text-center">{{section.name}}</blockquote>
<div ng-repeat="product in products">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">{{product.name}}</span>
<input type="number"
class="form-control text-center"
placeholder="Cantidad"
ng-model="total"
ng-change="calculate(section.id, product.id, total)">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<blockquote class="text-center">Final Inventory</blockquote>
<div ng-repeat="product in products">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">{{product.name}}</span>
<p class="form-control text-center">{{product.total}}</p>
</div>
</div>
</div>
</div>
</form>
</div>
JS
var app = angular.module("inventory",[]);
app.controller("ProdCtrl", ['$scope',
function($scope) {
$scope.sections = [
{id:1, name:'Initial Inventory'},
{id:2, name:'Production'},
{id:3, name:'Sales'},
];
$scope.products = [
{id:1, name:'Prod1', total:0},
{id:2, name:'Prod2', total:0},
{id:3, name:'Prod3', total:0},
{id:4, name:'Prod4', total:0}
];
$scope.calculate = function( sectionId, productId, cantidad ){
if( sectionId != 3 ){
$scope.products[productId-1].total += cantidad;
} else {
$scope.products[productId-1].total -= cantidad;
}
};
}
]);
There were problems in your js code
First you were comparing with section. It should have been sectionId in the if loop. Second the calculate method which recieves the argument as cantidad should be parsed to a Integer value.
So your working codepen
And JS code which I changed (the calculate function)
$scope.calculate = function( sectionId, productId, cantidad ){
var inventoryEdit = parseInt(cantidad);
if( sectionId != 3 ){
$scope.products[productId-1].total += inventoryEdit;
} else {
$scope.products[productId-1].total -= inventoryEdit;
}
};

Categories