Javascript 如何在用户选择选项时向AngularJS中的HTML添加数组内容_Javascript_Html_Angularjs

Javascript 如何在用户选择选项时向AngularJS中的HTML添加数组内容

javascript html angularjs

Javascript 如何在用户选择选项时向AngularJS中的HTML添加数组内容,javascript,html,angularjs,Javascript,Html,Angularjs,我一直在为AngularJS中的编程任务而挣扎。我已经对基础知识进行了分类，但我似乎不了解某个特定部分，也不知道要使用哪个Angular命令/指令我应该将用户（从表单中）选择的鱼（包含在数组中）添加到HTML中，并在他们选择更多鱼时继续添加更多鱼，并在他们需要时删除它们（我应该使用ng模型吗？）到目前为止，我有以下几点： HTML 谢谢试试这个： html: <body ng-app = "fishSaver" ng-controller= "fishController as fis

我一直在为AngularJS中的编程任务而挣扎。我已经对基础知识进行了分类，但我似乎不了解某个特定部分，也不知道要使用哪个Angular命令/指令

我应该将用户（从表单中）选择的鱼（包含在数组中）添加到HTML中，并在他们选择更多鱼时继续添加更多鱼，并在他们需要时删除它们（我应该使用ng模型吗？）

到目前为止，我有以下几点：

HTML

谢谢

试试这个：

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>

我不是100%确定你问的是什么？只是如何在阵列中显示鱼并提供移除它们的机制？

你说选择更多鱼意味着你提供了复选框还是什么？关于这个问题，你能告诉我一些具体的情况吗。

     (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'}


        ]
        })();

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

  (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'}


        ]
        })();