效果圖：
html文件：複製後可直接運行
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>angularJs</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
body{font-size:14px;line-height:1.42857143;color: #000;}
.container{margin-top:100px;}
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="myCtrl as vm">
<form name="resumeNameForm" novalidate class="form-horizontal" method="post" autocomplete="off">
<div class="row form-group" ng-repeat="languageItem in vm.languageInfo.languages">
<label class="col-md-2 control-label"><span ng-show="!$index">語言要求：</span></label>
<div class="col-md-5">
<select class="form-control" ng-model="languageItem.value" ng-options="n.value as n.name for n in vm.languageTypes">
<option value="">請選擇語言{{$index + 1}}</option>
</select>
</div>
<div class="col-md-5">
<button class="btn btn-sm btn-default" type="button" ng-disabled="vm.languageInfo.languages.length >= 4" ng-click="vm.languageInfo.add($index)">+</button>
<button class="btn btn-sm btn-default" type="button" ng-click="vm.languageInfo.delete($index)" ng-show="$index">-</button>
</div>
</div>
<div class="row form-group">
<div class="col-md-6 col-md-offset-2">
<input class="btn btn-primary" type="submit" ng-click="vm.save()" value="確認">
</div>
</div>
<div class="row form-group">
<div class="col-md-6 col-md-offset-2">{{ vm.jobInfoData}}</div>
</div>
</form>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
var vm = this;
vm.languageTypes = [
{value: 'MandarinChinese', name: '中文普通話'},
{value: 'Cantonese', name: '粵語'},
{value: 'ShanghaiDialect', name: '上海話'},
{value: 'SouthernMin', name: '閩南話'},
{value: 'NorthKoreasWords', name: '朝鮮話'},
{value: 'English', name: '英語'},
{value: 'Japanese', name: '日語'},
{value: 'French', name: '法語'},
{value: 'German', name: '德語'},
{value: 'Russian', name: '俄語'},
{value: 'Korean', name: '韓語'},
{value: 'Spanish', name: '西班牙語'},
{value: 'Portuguese', name: '葡萄牙語'},
{value: 'TheArabicLanguage', name: '阿拉伯語'},
{value: 'Italian', name: '意大利語'}];
vm.languageInfo = {};
vm.languageInfo.languages = [];
// 新增語言要求
vm.languageInfo.add = function($index) {
vm.languageInfo.languages.splice($index + 1, 0, {
key: $index + 1,
value: ''
});
};
// 刪除語言要求
vm.languageInfo.delete = function($index) {
vm.languageInfo.languages.splice($index, 1);
};
vm.save=save;
activate();
////////////////////////////////
function activate() {
//初始化職位語言要求
vm.languageInfo.languages.push({
key: 0,
value: ''
});
}
function save() {
vm.jobInfoData = {
languageTypes: vm.languageInfo.languages.filter(i => i.value).map(j => j.value)
};
}
});
</script>
</body>
</html>