Html 如何添加到a<；ul>；使用Angularjs-点击按钮/用户输入条目？_Html_Angularjs Directive_Angular Ngmodel

Html 如何添加到a<；ul>；使用Angularjs-点击按钮/用户输入条目？

html

Html 如何添加到a<；ul>；使用Angularjs-点击按钮/用户输入条目？,html,angularjs-directive,angular-ngmodel,Html,Angularjs Directive,Angular Ngmodel,请参考我的简历我需要一种方法从输入框中获取用户输入（文件名），并将其作为列表项添加到中。我以为.push指令可以工作，而在空数组变量的上绑定ng？它不起作用了。非常感谢您的帮助，谢谢 ///////////HTML///////////// <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel

请参考我的简历

我需要一种方法从输入框中获取用户输入（文件名），并将其作为列表项添加到

中。我以为.push指令可以工作，而在空数组变量的

上绑定ng？它不起作用了。非常感谢您的帮助，谢谢

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

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

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

    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 = [];

    });

#文件输入框{
左边距：300px；
位置：固定；
}

您在以下方面有语法错误：

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

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

您在以下方面有语法错误：

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

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

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


var myMod=angular.module（“MyModule”，[]）；
myMod.controller（“MyController”，函数（$scope）{
var self=这个；
//在页面加载时取消选中复选框
self.isBoxChecked=false；
//onUserClick fn使ng show的值为真
$scope.pusharr=[]；//要推送名称的新数组
$scope.someFileName=“”；
$scope.pushme=函数（名称）{
$scope.pusharr.push（名称）；
$scope.someFileName=“”；
};
//文件名的空数组
self.fileNamesInList=[]；
});
文件夹
全部展开
文件夹1

文件1.1
文件1.2
文件1.3

文件夹2

文件2.1
文件2.2
文件2.3

文件夹3

文件3.1
文件3.2
文件3.3

文件名：
添加到列表中

{{name}

我只在尝试这一点时才把重点放在推广概念上。

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


var myMod=angular.module（“MyModule”，[]）；
myMod.controller（“MyController”，函数（$scope）{
var self=这个；
//在页面加载时取消选中复选框
self.isBoxChecked=false；
//onUserClick fn使ng show的值为真
$scope.pusharr=[]；//要推送名称的新数组
$scope.someFileName=“”；
$scope.pushme=函数（名称）{
$scope.pusharr.push（名称）；
$scope.someFileName=“”；
};
//文件名的空数组
self.fileNamesInList=[]；
});
文件夹
全部展开
文件夹1

文件1.1
文件1.2
文件1.3

文件夹2

文件2.1
文件2.2
文件2.3

文件夹3

文件3.1
文件3.2
文件3.3

文件名：
添加到列表中

{{name}

我只在尝试这一点的时候才把重点放在推广概念上