如何使用Angularjs中的按钮单击指令创建选择选项

时间:2014-09-30 07:18:40

标签: javascript jquery angularjs

我想知道当我使用此列表渲染时,如何复制选择标记..

var lists = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}]

并且有一个添加按钮来复制此选择标记。

我为此创造了小提琴: http://jsfiddle.net/rdy4e4xx/

我正在考虑使用指令,但我不知道从哪里开始。谢谢你们。

2 个答案:

答案 0 :(得分:2)

我认为您正在寻找类似的内容(更新):

HTML:

  <div ng-controller="ListsCtrl">
        {{ mySizes }}
        <select ng-model="selectTag.value"  ng-repeat="selectTag in selectTags">
            <option value="">- - Make Selection - -</option>
            <option ng-repeat="size in sizes" value="{{ size.name }}">{{ size.name}}</option>
        </select>
      <button type="button" ng-click="duplicateSelectTag()">Duplicate Select Tags</button>
      Selected values:
      <ul ng-repeat="selectTag in selectTags">
          <li>{{selectTag.value}}</li>
      </ul>
    </div>

JS:

var app = angular.module("app",[]);
app.controller('ListsCtrl',function($scope){
   $scope.sizes = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}]; 
    $scope.selectTags=[{
        value:null
    }];
    $scope.duplicateSelectTag = function() {

        $scope.selectTags.push({});
    }
});

Demo

答案 1 :(得分:0)

我认为你正在寻找这个

  <div ng-controller="ListsCtrl">
        {{ mySizes }}
        <select ng-model="mySizes">
            <option value="">- - Make Selection - -</option>
            <option ng-repeat="size in sizes" value="{{ size.name }}">{{ size.name}}</option>
        </select>

     <button ng-click="dupplicate(mySizes)">Duplicate Select Tags</button>
  </div>

var app = angular.module("app",[]);
app.controller('ListsCtrl',function($scope){
    $scope.sizes = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}]; 
    $scope.dupplicate = function(mySizes){       
        $scope.sizes.push({name: mySizes});
    };
});