Question

我有一个简单的ng-model绑定到一个复选框。但每次用户输入新值时，它都会替换屏幕上的值。我想知道他们可以继续创造更多，他们只是随便附上一个复选框。使用Angular-Material。

如何让这部分工作？我想我需要一个空数组来获取集合？我目前有一个json已经在为页面的其余部分提供信息，但如果我可以在页面级别工作，我可以弄清楚如何将它存入现有的json。

这是我的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>

控制器里有什么：

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

以下是CODEPEN中的测试环境。

我提前感谢您的帮助

Answer 1

您可以将$scope.name更改为数组，例如：

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

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

然后使用html

中的names循环ng-repeat

使用AngularJS将值推送到json文件

1 个答案: