Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I am new to angularjs. I am currently doing a mobile app with ionic (that's why I have to use angularjs). I have an array and I created a add form with a button so that I can add item in the array. I have created some dummy data first because I want to test it around. I am not sure how to implement an add button so that user can add the item to that array (tempData).

Here is my code.

json-dummyObject.js

angular.module('app')
.factory('WebApi', function () {
    var owners = [{

        value: "Amy",
        text: "Amy",
    }, {

        value: "Peter",
        text: "Peter"
    }, {
        value: "Jim",
        text: "Jim"
    }];

        var sex = [{

        value: "Male",
        text: "Male",
    }, {

        value: "Female",
        text: "Female"
    }];

        var country = [{

        value: "Canada",
        text: "Canada",
    }, {

        value: "US",
        text: "United States"
    },{
        value: "China",
        text: "China"
    }];

    var tempData = [];
    var someDate = new Date();

    //Display 100 dummy item 
    for (var i = 0; i < 100; i++) {


        var selectedCountry = country[Math.floor((Math.random() * country.length))];
        var selectedSex = sex[Math.floor((Math.random() * sex.length))];
        var selectedOwners = owners[Math.floor((Math.random() * owners.length))];

       tempData.push({
            id: i,
            owners: selectedOwners.text,
            country: selectedCountry.text,
            sex: selectedSex.text,
        })
    };

    return {
        getAll: function () {
            return tempData;
        },
        getCountry: function(){
           return selectedCountry.text;
    },
        getSex: function(){
           return selectedSex.text;
 },
      getOwners: function(){
            return selectedOwners.text;
           }
       }
});

Here is my add form

<ion-view>
    <ion-header-bar class="bar bar-header bar-energized">
        <h1 class="title" style="color:black"> Add Data </h1>
    </ion-header-bar>

    <ion-content>
        <div ng-controller="addCtrl">
            <form name="addForm" ng-submit="submitForm()">

                <label class="item item-input item-select">
                    <b class="input-label">Owner:</b>
                    <select ng-model="newOwner" required>
                        <option value="" title="Select Owner" selected disabled>Owner</option>                      
                        <option ng-repeat="owner in owners" value="{{owner.value}}"
                                ng-selected="{{owner.value== owners}}">
                            {{owner.value}}
                        </option>
                    </select>
                </label>

             <label class="item item-input item-select">
                    <b class="input-label">Sex:</b>
                    <select ng-model="newSex" required>
                        <option value="" title="Select Sex" selected disabled>Sex</option>                      
                        <option ng-repeat="sexItem in sex" value="{{sexItem.value}}"
                                ng-selected="{{sexItem.value== sex}}">
                            {{sexItem.value}}
                        </option>
                    </select>
                </label>


             <label class="item item-input item-select">
                    <b class="input-label">Country:</b>
                    <select ng-model="newCountry" required>
                        <option value="" title="Select Sex" selected disabled>Sex</option>                      
                        <option ng-repeat="countryItem in country" value="{{countryItem.value}}"
                                ng-selected="{{countryItem.value== country}}">
                            {{countryItem.value}}
                        </option>
                    </select>
                </label>

            <a class="button" ng-click="add()">Add to List</a>
        </div>
    </ion-content>

</ion-view>

Finally this is my controller:

 angular.module('app')

    .controller('addCtrl', function ($scope,WebApi) {
            $scope.country = WebApi.getCountry();
$scope.sex = WebApi.getSex();
        $scope.owners = WebApi.getOwners();
        $scope.tempData = WebApi.getAll();

         $scope.add = function(){
             //Not sure how to get it work (Need help here
          }
    });
share|improve this question
    
Please create a JSFiddle so I can see what error you are receiving. I can't quite see what issue you are running into. – Brian Gerhards Jul 20 '15 at 4:02
    
Hi Brian, I don't have any error so far, what I want is I want to know how to use the $scope.add = function(){ //Problem } here. It is because I know that I have some random dummy data and I push it into the array 'tempData' so that I can display it. However, I am stuck right now because I am not sure if I can still use the same array var tempData = []; to add item from my add form – Big Ticket Jul 20 '15 at 4:08
up vote 1 down vote accepted

Well, you can call methods from your factory so you can do something like this:

  1. Add the data in the $scope.tempData in the $scope.add function from the controller
  2. Create a method in your WebApi factory to update the tempData array
  3. Call this method from the controller's $scope.add function

So, in your controller:

$scope.add = function() {
    $scope.tempData.push({
        id: $scope.tempData.length,
        owners: owner.value,
        country: countryItem.value,
        sex: sexItem.value
    });
    WebApi.updateData($scope.tempData);
};

And in your factory:

return {
    getAll: function () {
        return tempData;
    },
    getCountry: function(){
        return selectedCountry.text;
    },
    getSex: function(){
        return selectedSex.text;
    },
    getOwners: function(){
        return selectedOwners.text;
    },
    updateData: function(newData) {
        tempData = newData;
    }
}
share|improve this answer
    
Hi Erazihel, thank you for your respond. However, I am wondering under the $scope.tempData.push. If I should use, owners: $scope.newOwner, can I do it this way and the defined the ng-model in the add form? – Big Ticket Jul 20 '15 at 7:04
    
You could simply use a method to push the new value from your controller to the array in your factory. In your factory, add a function in your returned object: addOwner: function(newOwner) { owners.push(newOwner) }; and in your controller, in the $scope.add function: WebApi.addOwner($scope.newOwner); – Erazihel Jul 20 '15 at 7:11
    
it worked thanks :) – Big Ticket Jul 20 '15 at 7:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.