pushing values to a json file with AngularJS

Question

I have a simple ng-model binded to a checkbox. But every time the user enters a new value, it replaces the one on the screen. I would like to have it that they can continue to create more and they just keep ading up with a checkbox attached. Using Angular-Material.

How can get that part working? I imagine I need an empty array to grab the collection? I currently have a json already feeding the rest of the page but if I can have t working at page level, I can figure out how to get it to existing json.

Here is my HTML

<div ng-controller="AppCtrl" ng-cloak="" class="buttondemoBasicUsage" ng-app="MyApp">
    <md-content layout="column">
        <section flex layout="row">
            <md-input-container flex="25">
                <label>Metadata Name</label>
                <input type="text" ng-model="metaName">
            </md-input-container>
            <div flex="25" class="inline-button" layout layout-align="center center">
                <md-button type="button" ng-click="setValue(metaName)" ng-disabled="metaName==null || metaName==''" class="md-button md-raised md-ink-ripple md-accent" layout="row" layout-align="space between">
                    <span translate="EC.ADD_METADATA">Add Metadata</span>
                    <md-icon class="ti-icon ti-plus" layout layout-align="end center"></md-icon>
                </md-button>
            </div>
        </section>
        <section>
            <div>
                <md-checkbox ng-hide="name==null || name==''">
                    {{name}}
                </md-checkbox>
                <md-checkbox ng-repeat="eachTag in ::vm.media.tags">
                    {{eachTag}}
                </md-checkbox>
            </div>
        </section>  

    </md-content>
</div>

And what's in the controller:

$scope.setValue = function (metaName) {
    $scope.name = metaName;
    $scope.metaName = null;
}

Here is testing environment in CODEPEN.

I appreciate the help in advance

mr_sudaca · Accepted Answer · 2017-02-27 20:13:13Z

1

you can change $scope.name to work as an array, like:

angular.module('MyApp',['ngMaterial', 'ngMessages','material.svgAssetsCache'])

.controller('AppCtrl', function($scope) {       
  $scope.names = []
  $scope.setValue = function (metaName) {
    $scope.names.push(metaName);
    $scope.metaName = null;
  }
});

and then loop names using ng-repeat in your html

edited Feb 27, 2017 at 20:13

answered Feb 27, 2017 at 19:38

mr_sudaca

1,1667 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

pushing values to a json file with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related