Hi All,

I have the following lightning component which input data from custom object using aura:iteration and input components. There are two buttons to add and remove a row. If the page loads and you click on remove row it works. But when you click on Add Row and then click on Remove Row, it doesnt work.

Can someone help?



Criteria.cmp

<aura:component controller="ValidationCreationController" implements="force:appHostable">
	<ltng:require styles="/resource/slds/assets/styles/salesforce-lightning-design-system.min.css"/>
    <aura:attribute name="valCriteriaList" type="Rule_Criteria__c[]"
                    access="public"/>
    <aura:attribute type="SelectOption[]" name="appliesToOptions" access="private" />
    <aura:attribute type="SelectOption[]" name="categoryOptions" access="private" />
    <aura:attribute type="SelectOption[]" name="criteriaOptions" access="private" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	<div class="container">
    	<form class="slds-form--compound">
            <div class="form-element__group">
                <aura:iteration var="ruleCriteria" items="{!v.valCriteriaList}">
      				<div class="slds-form-element__row">
                    	<div class="slds-form-element slds-is-required slds-size--1-of-12">
                        	<ui:inputSelect class="slds-select"
                                            value="{!ruleCriteria.Applies_To__c}">
                                <aura:iteration items="{!v.appliesToOptions}" var="app">
                                     <ui:inputSelectOption text="{!app.value}" label="{!app.label}"/>
                                </aura:iteration>
                            </ui:inputSelect>
                    	</div>
                    	<div class="slds-form-element slds-is-required slds-size--1-of-12">
                      		<ui:inputNumber class="slds-input"  
                                    value="{!ruleCriteria.Rule_Hierarchy__c	}" 
                                    required="true" placeholder="Rule Hierarchy" />
                    	</div>
                    	<div class="slds-form-element slds-is-required slds-size--5-of-12">
                        	<ui:inputText class="slds-input" 
                                          value="{!ruleCriteria.Validation_Logic__c}"
                                          placeholder="Validation Logic"
                                          /> 
                    	</div>
                    	<div class="slds-form-element slds-is-required slds-size--1-of-12">
                        	<ui:inputSelect class="slds-select" 
                                            value="{!ruleCriteria.Criteria__c}">
                                <aura:iteration items="{!v.criteriaOptions}" var="crc">
                                     <ui:inputSelectOption text="{!crc.value}" label="{!crc.label}"/>
                                </aura:iteration>
                            </ui:inputSelect>
                    	</div>
                    	<div class="slds-form-element slds-is-required slds-size--1-of-12">
                        	<ui:inputSelect class="slds-select" 
                                            value="{!ruleCriteria.Validation_Category__c}">
                                <aura:iteration items="{!v.categoryOptions}" var="cat">
                                     <ui:inputSelectOption text="{!cat.value}" label="{!cat.label}"/>
                                </aura:iteration>
                            </ui:inputSelect>
                    	</div>
                    	<div class="slds-form-element slds-is-required slds-size--1-of-12">
                             <ui:inputText class="slds-input" 
                                           value="{!ruleCriteria.Message_Code__c}"
                                           placeholder="Message Code" /> 
                    	</div>
                        <div class="slds-form-element slds-is-required slds-size--1-of-12">
                             <ui:inputText class="slds-input" 
                                           value="{!ruleCriteria.Message_Past_Tense__c}"
                                           placeholder="Message Past Tense" /> 
                    	</div>
                        <div class="slds-form-element slds-is-required slds-size--1-of-12">
                             <ui:inputText class="slds-input" 
                                           value="{!ruleCriteria.Msg_Present_Tense__c}"
                                           placeholder="Message Present Tense" /> 
                    	</div>
                	</div>
                </aura:iteration>
                <div class="slds-form-element__row">
                    <div class="slds-form-element">
                        <ui:button aura:id="addRow" 
                                   buttonTitle="Click to add new row" 
                                   class="button" 
                                   label="Add Row" press="{!c.addRow}"/>
                        <ui:button aura:id="removeRow" 
                                   buttonTitle="Click to remove row" 
                                   class="button" 
                                   label="Remove Row" press="{!c.removeRow}"/>
                        
                    </div>
             	</div>                
            </div>
        </form>
    </div>
</aura:component>

Java script Controller
 

({
    doInit : function(component, event, helper) {
        //alert('test');
		helper.addRow(component,helper);
        helper.getAppliesTo(component,helper);  
        helper.getCategory(component,helper);
        helper.getCriteria(component,helper);
    },
    addRow : function(component, event, helper) {
      	helper.addRow(component,helper);  
    },
    removeRow : function(component, event, helper) {
        helper.removeRow(component,helper); 
    },
})

Helper
 

({
	addRow : function(component,helper) {
        var validationCri = {  'sobjectType' : 'Rule_Criteria__c',
                                'Applies_To__c' : 'Horse' ,
                                'Criteria__c' : 'Is Met' };
        var validationCriterList = component.get("v.valCriteriaList");
        validationCriterList.push(validationCri);
        component.set("v.valCriteriaList", validationCriterList);
    }, 
    removeRow : function(component,helper) {
        var validationCriterList = component.get("v.valCriteriaList");
 		validationCriterList.pop();
        console.log(validationCriterList);
		component.set("v.valCriteriaList", validationCriterList);
        console.log(validationCriterList);
        
    },
	getAppliesTo : function(component,helper) {
		var action = component.get("c.getAppliesTo");
        helper.populateDropDown(component,action,"v.appliesToOptions");
	},
    getCategory : function(component,helper) {
		var action = component.get("c.getCategory");
        helper.populateDropDown(component,action,"v.categoryOptions");
	},
    getCriteria : function(component,helper) {
		var action = component.get("c.getCriteria");
        helper.populateDropDown(component,action,"v.criteriaOptions");
	},
    populateDropDown : function(component,action,attr) {
    	var opts = [];
    	action.setCallback(this, function(a) {
            for(var i=0;i< a.getReturnValue().length;i++){ 
                opts.push({label: a.getReturnValue()[i].label, value: a.getReturnValue()[i].value});
            }
            component.set(attr, opts);
        });
        $A.enqueueAction(action);
	},
})