如何使用 Angularjs 添加到 <ul> - 单击按钮/用户输入条目？答案

【问题标题】：How to add to a <ul> using Angularjs - upon click of button/user input entry?如何使用 Angularjs 添加到 <ul> - 单击按钮/用户输入条目？
【发布时间】：2016-04-19 05:31:52
【问题描述】：

请参考我的 jsfiddle https://jsfiddle.net/sash2507/9g5c3f49/1/

我需要一种从输入框中获取用户输入（文件名）的方法 - 并将其作为列表项添加到 <ul>。我认为 .push 指令可以工作，并且在该空数组变量的<ul> 上使用 ng-bind？它不工作。非常感谢任何帮助，谢谢。

//////////HTML////////////

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="CSS/style.css">
        <script    `enter code here`src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
        <script src="JS/main.js"></script>
    </head>

    <body ng-app="MyModule">
        <div ng-controller="MyController as ctrl">
        <h2>Folders</h2>
        <input type="checkbox" ng-model="ctrl.isBoxChecked">Expand All
            <div ng-show="ctrl.isBoxChecked">
                <h2>Folder 1</h2>
                <ul>
                    <li>File 1.1</li>
                    <li>File 1.2</li>
                    <li>File 1.3</li>
                </ul>

                <h2>Folder 2</h2>
                <ul>
                    <li>File 2.1</li>
                    <li>File 2.2</li>
                    <li>File 2.3</li>
                </ul>

                <h2>Folder 3</h2>
                <ul>
                    <li>File 3.1</li>
                    <li>File 3.2</li>
                    <li>File 3.3</li>
                </ul>
            </div>

            <div>
                <span id="fileInputBox">File Name: 
                    <input type="text" ng-model="someFileName" `enter code here`placeholder="enter a file name" >
                    <button ng-click="ctrl.onUserClick">Add to list</button>
                </span>
            </div>

    </body>
    </html>

////////////JS///////////

    var myMod = angular.module("MyModule", []);
    myMod.controller("MyController", function() {
        var self = this;

        // Makes checkbox unchecked upon page load
        self.isBoxChecked = false;

        // onUserClick fn makes value true for ng-show
        self.onUserClick = function() {
            self.isBoxChecked = !self.isBoxChecked;
            self.someFileName = self.fileNamesInList;
            self.fileNamesInList.push({
                self.someFileName
            })
        };

        // Empty array for file names
        self.fileNamesInList = [];

    });

///////CSS/////////////

    #fileInputBox {
        margin-left: 300px;
        position: fixed;
    }

【问题讨论】：

标签： html angularjs-directive angular-ngmodel

【解决方案1】：

你有一个语法错误：

self.fileNamesInList.push({
 self.someFileName
})

您正在推送一个对象，但您没有指定属性的名称

【讨论】：

【解决方案2】：

@Saloni Sharma 首先让它正确

<script    `enter code here`src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> to 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

通过这个你的角度 js 没有定义。然后在你的控制器和新数组中使用 $scope 来推送名称，试试下面的代码它正在工作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="CSS/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script type="text/javascript">
       var myMod = angular.module("MyModule", []);
myMod.controller("MyController", function($scope) {
    var self = this;

    // Makes checkbox unchecked upon page load
    self.isBoxChecked = false;

    // onUserClick fn makes value true for ng-show
    $scope.pusharr=[]; //new array to push names
    $scope.someFileName="";
    $scope.pushme = function(name) {
        $scope.pusharr.push(name);
        $scope.someFileName="";

    };

    // Empty array for file names
    self.fileNamesInList = [];

});

    </script>
</head>

<body ng-app="MyModule">
    <div ng-controller="MyController as ctrl">
    <h2>Folders</h2>
    <input type="checkbox" ng-model="ctrl.isBoxChecked">Expand All
        <div ng-show="ctrl.isBoxChecked">
            <h2>Folder 1</h2>
            <ul>
                <li>File 1.1</li>
                <li>File 1.2</li>
                <li>File 1.3</li>
            </ul>

            <h2>Folder 2</h2>
            <ul>
                <li>File 2.1</li>
                <li>File 2.2</li>
                <li>File 2.3</li>
            </ul>

            <h2>Folder 3</h2>
            <ul>
                <li>File 3.1</li>
                <li>File 3.2</li>
                <li>File 3.3</li>
            </ul>
        </div>

        <div>
            <span id="fileInputBox">File Name: 
                <input type="text" ng-model="someFileName" `enter code here`placeholder="enter a file name" >
                <button ng-click="pushme(someFileName)">Add to list</button>
            </span>
            <ul>
                <li ng-repeat="name in pusharr">{{name}}</li>
            </ul>
        </div>

</body>
</html>

我只专注于推动概念，尝试这个。

【讨论】：