当用户选择一个选项时，如何在AngularJS中向HTML中添加数组内容

How to add array contents to the HTML in AngularJS when the user selects an option

本文关键字：中向 AngularJS HTML 数组 添加 选择 用户 选项 一个      更新时间：2023-09-26

我一直在努力完成AngularJS中的编程任务。我已经把基础知识整理好了，但我似乎不理解某个特定的部分，而且我不知道该使用哪个Angular命令/指令。

我应该将用户选择的鱼(包含在数组中)添加到HTML中(从表单中)，并在他们选择更多鱼时继续添加更多鱼，并在他们需要时删除它们(我应该使用ng-model吗?)。

到目前为止，我有以下内容:

HTML 

 <!DOCTYPE html>
        <html ng-app = "fishSaver">
        <head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
            <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="app.js"></script>
        </head>
        <body ng-controller= "fishController as fishC">
            <!--- Choose fish from dropdown--->
        <div ng-controller = "fishController as fishCtrl">
            <form >
            Choose a fish
                <select ng-model= "theFishes">
                    <option value="Gold" ng-model = "gold">Gold Fish</option>
                    <option value="Angel" ng-model = "angel">Angel Fish</option>
                    <option value="Babel" ng-model = "babel">Babel fish</option>
                </select><br>
            </form> 
        <br>
            <div class = "col-sm-6 col-md-3" ng-model = "fishProfiles">
            {{fishCtrl.fishProfiles}}
            </div>  
        </div>

        </div>
        </body>
        </html>

AngularJS: 

     (function(){
        var app = angular. module('fishSaver', [])

        // fish controller
        app.controller('fishController', function(){
        var vm = this;
        // define a new profile 
        vm.fishProfiles = fishArray;
        });

        // JSON object
        var fishArray = [
            {name: 'Gold Fish', 
            weight: 0.1,
            images:'images/gold.jpg'},
            {name: 'Angel Fish',
            weight: 0.2,
            images:'images/angel.jpg'},
            {name: 'Babel Fish',
            weight: 0.3,
            images:'images/babel.jpg'}

        ]
        })();

谢谢

试试这个:

html: 

<body ng-app = "fishSaver" ng-controller= "fishController as fishC">
    <!--- Choose fish from dropdown--->
<div ng-controller = "fishController as fishCtrl">
    <form >
    Choose a fish
        <select ng-model= "theFishes" ng-change="fishCtrl.selectedFish(theFishes)">
            <option value="Gold" >Gold Fish</option>
            <option value="Angel">Angel Fish</option>
            <option value="Babel">Babel fish</option>
        </select><br>
    </form> 
<br>
    <div class = "col-sm-6 col-md-3" ng-model = "fishProfiles">
    {{fishCtrl.fishProfiles}}

    </div>  
  <hr>
  <h3>my list</h3>
    {{fishCtrl.fishList}}
</div>

</div>

javascript: 

  (function(){
        var app = angular. module('fishSaver', [])
        // fish controller
        app.controller('fishController', function(){
        var vm = this;
        // define a new profile 
        vm.fishProfiles = fishArray;
         vm.fishList = [];
       vm.selectedFish = function(fish){
         vm.fishList.push({'name':fish})
    }
        });


        // JSON object
        var fishArray = [
            {name: 'Gold Fish', 
            weight: 0.1,
            images:'images/gold.jpg'},
            {name: 'Angel Fish',
            weight: 0.2,
            images:'images/angel.jpg'},
            {name: 'Babel Fish',
            weight: 0.3,
            images:'images/babel.jpg'}

        ]
        })();

我不是100%确定你的问题是如何在数组中显示鱼，并提供一种机制来删除它们?

相关文章：