Перемещение элемента в Json Array angularjs

0

Я новичок в angularjs. В настоящее время я занимаюсь мобильным приложением с ионным (поэтому я должен использовать угловые). У меня есть массив, и я создал форму добавления с помощью кнопки, чтобы добавить элемент в массив. Сначала я создал некоторые фиктивные данные, потому что я хочу проверить его. Я не уверен, как реализовать кнопку добавления, чтобы пользователь мог добавить элемент в этот массив (tempData).

Вот мой код.

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;
           }
       }
});

Вот моя форма добавления

<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>

Наконец, это мой контроллер:

 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
          }
    });
  • 0
    Пожалуйста, создайте JSFiddle, чтобы я мог видеть, какую ошибку вы получаете. Я не могу понять, с какой проблемой вы сталкиваетесь.
  • 0
    Привет, Брайан, пока у меня нет ошибок, я хочу знать, как использовать здесь $ scope.add = function () {// Problem}. Это потому, что я знаю, что у меня есть некоторые случайные фиктивные данные, и я помещаю их в массив «tempData», чтобы я мог их отобразить. Тем не менее, я застрял прямо сейчас, потому что я не уверен, могу ли я все еще использовать тот же массив var tempData = []; добавить элемент из моей формы добавления
Теги:
arrays
ionic

1 ответ

1
Лучший ответ

Ну, вы можете вызывать методы с вашего завода, чтобы вы могли сделать что-то вроде этого:

  1. Добавьте данные в $scope.tempData в функцию $scope.add из контроллера
  2. Создайте метод на фабрике WebApi для обновления массива tempData
  3. Вызовите этот метод из функции $scope.add контроллера

Итак, в вашем контроллере:

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

И на вашем заводе:

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;
    }
}
Поделиться
  • 0
    Привет Erazihel, спасибо за ваш ответ. Тем не менее, я задаюсь вопросом под $ scope.tempData.push. Если мне нужно использовать, владельцы: $ scope.newOwner, могу ли я сделать это таким образом и определить модель ng в форме добавления?
  • 0
    Вы можете просто использовать метод для передачи нового значения из вашего контроллера в массив на вашей фабрике. На вашей фабрике добавьте функцию в возвращаемый объект: addOwner: function (newOwner) {owners.push (newOwner)}; и в вашем контроллере, в функции $ scope.add: WebApi.addOwner ($ scope.newOwner);
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню