LOTUSMS LOTUSMS -4 years ago 247
AngularJS Question

pushing values to a json file with AngularJS

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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download