請在行動中看到的問題：添加個人信息
Working PlunkerNG-模型的角度UI的自舉模式選擇下拉列表
我有一個網頁。它應該允許爲該人添加/編輯/刪除多個地址。
頁面上有一個Add New Address按鈕，打開一個模式對話框輸入地址信息。
單擊模式對話框中的添加地址按鈕將此地址添加到頁面中的地址列表中。
添加地址後，用戶可以點擊編輯按鈕進行編輯。這是我遇到問題的地方。
出於某種原因，在編輯的地址，地址類型和狀態下拉列表中沒有得到與模型值進行更新，即使值被設定似乎和服務。
我使用角1.6.2與角UI，引導2.5.0這一點。
簡單刪除track by key從ng選項的語法，一切都會好起來的。
ng-options="key as value for (key, value) in $ctrl.statesjson"將被罰款
我不知道，但返回舊字符串
stmpl += '<option ng-repeat="(id, value) in $ctrl.addresstypesjson track by id" value="{{id}}">{{value}}</option>';
而且我發現某處在您的控制器此
modalData: function() {
// $scope.$ctrl.dataForModal.addresstypeid = "102";
// $scope.$ctrl.dataForModal.addresstype = "PO Box";
return $scope.$ctrl.dataForModal;
},
所以，我評論硬編碼地址
預期 –
工作完全不工作！謝謝！ – sosspyker
這是因爲您正在使用ng-option as ng-options="key as value for (key, value) in $ctrl.statesjson track by key"所以由於這個鍵值對的角度不能夠綁定你的下拉值。的ng-repeat代替ng-options牛逼
使用試試這個
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="[email protected]" data-semver="2.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
(function (angular)
{
"use strict";
// make sure you define all dependencies in main app only
// you need NOT define these again in dependent components
var addPerson = angular.module('addPerson', ['ui.bootstrap']);
// only pass required dependencies in the controller
// just because you've defined the dependency 'ui.bootstrap' in main app
// does NOT necessarily require you to pass it again in the controller
// when you do not use it here
addPerson.controller('myCtrl', ['appFactory', '$scope', '$filter', '$log', function (appFactory, $scope, $filter, $log) {
// functions must be defined before they are called
var clearPerson = function() {
$scope.selTitleVal = "";
$scope.fname = "";
$scope.mi = "";
$scope.lname = "";
return (null);
};
// clear all entries
clearPerson();
}])
.factory('appFactory', function() {
return {};
});
})(window.angular);
</script>
<script>
/*
Contains following custom angular components:
1. addresses: Add Address button and displays the list of addresses added with Edit, Delete buttons
2. addressModal: Modal dialog to add/edit an address
*/
// 1. Angular Component: addresses
(function (angular) {
'use strict';
var stmpl = '';
stmpl += '<div><input type="button" class="btn btn-info" value="+ Address" ng-click="$ctrl.open();" /></div>';
stmpl += '<table class="table table-striped table-bordered" ng-if="$ctrl.isShow">';
stmpl += ' <thead>';
stmpl += ' <tr>';
stmpl += ' <th style="display:none">Address Type Id</th>';
stmpl += ' <th>Address Type</th>';
stmpl += ' <th>Address1</th>';
stmpl += ' <th style="display:none">State Id</th>';
stmpl += ' <th>Actions</th>';
stmpl += ' </tr>';
stmpl += ' </thead>';
stmpl += ' <tbody>';
stmpl += ' <tr ng-repeat="x in $ctrl.addresses track by $index">';
stmpl += ' <td style="display:none">{{ x.addresstypeid }}</td>';
stmpl += ' <td>{{ x.addresstype }}</td>';
stmpl += ' <td>{{ x.address1 }}<br />{{ x.address2 }}<br />{{ x.city }} {{ x.state }} {{ x.zip }}</td>';
stmpl += ' <td style="display:none">{{ x.stateid }}</td>';
stmpl += ' <td><input type="button" class="btn-xs btn-info" style="width:60px" value="Edit..." ng-click="$ctrl.editAddress($index);" /> <input type="button" class="btn-xs btn-info" style="width:60px" value="Delete..." ng-click="$ctrl.deleteAddress($index);" /></td>';
stmpl += ' </tr>';
stmpl += ' </tbody>';
stmpl += '</table>';
stmpl += '<br />';
function tableRowController($scope, $uibModal) {
this.$scope = $scope;
// these are fields in modal dialog - format for json
$scope.$ctrl.dataForModal = {
addresstypeid: '',
addresstype: '',
address1: '',
address2: '',
city: '',
stateid: '',
state: '',
zip: ''
};
$scope.$ctrl.title = "Addresses";
$scope.$ctrl.addresses = [];
$scope.$ctrl.isShow = false;
// below is how you call the dependent component 'addressModal'
// +Address is button's click event is wired to this
$scope.$ctrl.open = function() {
$scope.$ctrl.title = "Add New Address";
// read documentation for 'ui.bootstrap.modal'
// open the modal dialog for Add Address
$uibModal.open({
// addressModal.init() - initialize the modal dialog
component: "addressModal",
//windowClass: "my-dialog",
resolve: {
modalData: function() {
return $scope.$ctrl.dataForModal;
},
title: function(){
return $scope.$ctrl.title;
}
}
}).result.then(function (result) {
$scope.$ctrl.result = result;
console.info(result);
$scope.$ctrl.addAddress();
}, function (reason) {
// addressModal.closeAddress() is invoked here - same as cancel the modal dialog event
});
};
$scope.$ctrl.addAddress = function() {
$scope.$ctrl.addresses.push({
addresstypeid: $scope.$ctrl.result.addresstypeid,
addresstype: $scope.$ctrl.result.addresstype,
address1: $scope.$ctrl.result.address1,
address2: $scope.$ctrl.result.address2,
city: $scope.$ctrl.result.city,
stateid: $scope.$ctrl.result.stateid,
state: $scope.$ctrl.result.state,
zip: $scope.$ctrl.result.zip
});
$scope.$ctrl.isShow = true;
}
$scope.$ctrl.deleteAddress = function ($index) {
if (confirm("Do you want to delete this address?\r\nOK: Yes Cancel: No")) {
$scope.$ctrl.addresses.splice($index, 1);
if ($scope.$ctrl.addresses.length > 0) $scope.$ctrl.isShow = true;
else $scope.$ctrl.isShow = false;
}
}
$scope.$ctrl.editAddress = function ($index) {
$scope.$ctrl.title = "Edit Address";
$scope.$ctrl.dataForModal = {
addresstypeid: $scope.$ctrl.addresses[$index].addresstypeid,
addresstype: $scope.$ctrl.addresses[$index].addresstype,
address1: $scope.$ctrl.addresses[$index].address1,
address2: $scope.$ctrl.addresses[$index].address2,
city: $scope.$ctrl.addresses[$index].city,
stateid: $scope.$ctrl.addresses[$index].stateid,
state: $scope.$ctrl.addresses[$index].state,
zip: $scope.$ctrl.addresses[$index].zip
};
$uibModal.open({
// addressModal.init() - initialize the modal dialog
component: "addressModal",
scope: $scope,
resolve: {
modalData: function() {
$scope.$ctrl.dataForModal.addresstypeid = "102";
$scope.$ctrl.dataForModal.addresstype = "PO Box";
return $scope.$ctrl.dataForModal;
},
title: function() {
return $scope.$ctrl.title;
}
}
}).result.then(function (result) {
$scope.$ctrl.result = result;
console.info(result);
$scope.$ctrl.addresses[$index].addresstypeid = $scope.$ctrl.result.addresstypeid;
$scope.$ctrl.addresses[$index].addresstype = $scope.$ctrl.result.addresstype;
$scope.$ctrl.addresses[$index].address1 = $scope.$ctrl.result.address1;
$scope.$ctrl.addresses[$index].address2 = $scope.$ctrl.result.address2;
$scope.$ctrl.addresses[$index].city = $scope.$ctrl.result.city;
$scope.$ctrl.addresses[$index].stateid = $scope.$ctrl.result.stateid;
$scope.$ctrl.addresses[$index].state = $scope.$ctrl.result.state;
$scope.$ctrl.addresses[$index].zip = $scope.$ctrl.result.zip;
$scope.$ctrl.isShow = true;
}, function (reason) {
// addressModal.closeAddress() is invoked here - same as cancel the modal dialog event
});
}
}
angular.module('addPerson').component('addresses', {
bindings: { title: '<' }, // two way data-binding
template: stmpl,
controller: tableRowController
});
})(window.angular);
// 2. Angular Component: addressModal
(function (angular) {
var stmpl = "";
stmpl += '<!-- MODAL DIALOG: Add Address -->';
stmpl += ' <div class="modal-content">';
stmpl += ' <div class="modal-header">';
stmpl += ' <button type="button" class="close" data-dismiss="modal" ng-click="$ctrl.closeAddress();">×</button>';
stmpl += ' <h4 class="modal-title">{{ $ctrl.title }}</h4>';
stmpl += ' </div>';
stmpl += ' <div class="modal-body">';
stmpl += ' <div class="row form-group">';
stmpl += ' <label class="control-label col-md-2" for="ddlAddressType">Address Type</label>';
stmpl += ' <div class="col-md-10">';
stmpl += ' <select class="form-control" id="ddlAddressType" name="ddlAddressType" ng-model="$ctrl.modalData.addresstypeid" ng-change="$ctrl.changeAddressType();">';
stmpl += ' <option value="">** Select Address Type **</option >';
stmpl += ' <option ng-repeat="(id, value) in $ctrl.addresstypesjson track by id" value="{{id}}">{{value}}</option>';
stmpl += ' </select>';
stmpl += ' <span class="field-validation-valid text-danger" data-valmsg-for="ddlAddressType" data-valmsg-replace="true"></span>';
stmpl += ' </div> ';
stmpl += ' </div>';
stmpl += ' <div class="row form-group">';
stmpl += ' <label class="control-label col-md-2" for="Address1">Address1</label>';
stmpl += ' <div class="col-md-10">';
stmpl += ' <input class="form-control text-box single-line" id="Address1" name="Address1" ng-model="$ctrl.modalData.address1" type="text" value="" />';
stmpl += ' <span class="field-validation-valid text-danger" data-valmsg-for="Address1" data-valmsg-replace="true"></span>';
stmpl += ' </div> ';
stmpl += ' </div>';
stmpl += ' <div class="row form-group">';
stmpl += ' <label class="control-label col-md-2" for="Address1">Address2</label>';
stmpl += ' <div class="col-md-10">';
stmpl += ' <input class="form-control text-box single-line" id="Address2" name="Address2" ng-model="$ctrl.modalData.address2" type="text" value="" />';
stmpl += ' <span class="field-validation-valid text-danger" data-valmsg-for="Address2" data-valmsg-replace="true"></span>';
stmpl += ' </div>';
stmpl += ' </div>';
stmpl += ' <div class="row form-group">';
stmpl += ' <label class="control-label col-md-2" for="City">City</label>';
stmpl += ' <div class="col-md-10">';
stmpl += ' <input class="form-control text-box single-line" id="City" name="City" ng-model="$ctrl.modalData.city" type="text" value="" />';
stmpl += ' <span class="field-validation-valid text-danger" data-valmsg-for="City" data-valmsg-replace="true"></span>';
stmpl += ' </div>';
stmpl += ' </div>';
stmpl += ' <div class="row form-group">';
stmpl += ' <label class="control-label col-md-2" for="ddlState">State</label>';
stmpl += ' <div class="col-md-10">{{getValue($ctrl.modalData.stateid)}}';
stmpl += ' <select class="form-control" id="ddlState" name="ddlState" ng-model="$ctrl.modalData.stateid">';
stmpl += ' <option value="">** Select State **</option>';
stmpl += ' <option ng-repeat="(id, value) in $ctrl.statesjson" value="{{id}}">{{value}}</option>';
stmpl += ' </select>';
stmpl += ' <span class="field-validation-valid text-danger" data-valmsg-for="ddlState" data-valmsg-replace="true"></span>';
stmpl += ' </div>';
stmpl += ' </div>';
stmpl += ' <div class="row form-group">';
stmpl += ' <label class="control-label col-md-2" for="Zip">Zip</label>';
stmpl += ' <div class="col-md-10">';
stmpl += ' <input class="form-control text-box single-line" id="Zip" name="Zip" ng-model="$ctrl.modalData.zip" type="text" value="" />';
stmpl += ' <span class="field-validation-valid text-danger" data-valmsg-for="Zip" data-valmsg-replace="true"></span>';
stmpl += ' </div> ';
stmpl += ' </div>';
stmpl += ' </div>';
stmpl += ' <div class="modal-footer">';
stmpl += ' <input type="button" value="Add Address" class="btn btn-success" ng-click="$ctrl.addAddress();"/>';
stmpl += ' <input type="button" value="Close" class="btn btn-default" ng-click="$ctrl.closeAddress();" />';
stmpl += ' </div>';
stmpl += ' </div> <!-- model - content -->';
function tableRowController($scope, $http, $uibModal) {
this.$scope = $scope;
//var $ctrl = this;
$scope.$ctrl.addresstypesjson = {"100": "Home", "101": "Work", "102": "PO Box"};
$scope.$ctrl.statesjson = {"AN": "Andaman and Nicobar Islands", "AP": "Andhra Pradesh", "AR": "Arunachal Pradesh", "DD": "Daman and Diu", "DH": "Dadra and Nagar Haveli", "DL": "Delhi"};
// Events
// 1. init - initialize
$scope.$ctrl.$onInit = function() {
$scope.$ctrl.modalData = $scope.$ctrl.resolve.modalData;
$scope.$ctrl.title = $scope.$ctrl.resolve.title;
if ($scope.$ctrl.title != "Edit Address") {
$scope.$ctrl.modalData.addresstypeid = "";
$scope.$ctrl.modalData.addresstype = "";
$scope.$ctrl.modalData.address1 = "";
$scope.$ctrl.modalData.address2 = "";
$scope.$ctrl.modalData.city = "";
$scope.$ctrl.modalData.stateid = "";
$scope.$ctrl.modalData.state = "";
$scope.$ctrl.modalData.zip = "";
}
}
// 2. dismiss - cancel model dialog
$scope.$ctrl.closeAddress = function() {
$scope.$ctrl.modalInstance.dismiss("cancel");
}
// 3. close - add new address and close the dialog
$scope.$ctrl.addAddress = function() {
// assign selected text for drop-down list items
$scope.$ctrl.modalData.addresstype = $scope.$ctrl.addresstypesjson[$scope.$ctrl.modalData.addresstypeid];
$scope.$ctrl.modalData.state = $scope.$ctrl.statesjson[$scope.$ctrl.modalData.stateid];
$scope.$ctrl.modalInstance.close($scope.$ctrl.modalData);
}
$scope.getValue = function(id){
debugger
}
$scope.$ctrl.changeAddressType = function() {
console.info("Address Type drop-down list changed");
}
}
// register the component - dependecies automatically follow from app (parent)
angular.module('addPerson').component('addressModal', {
bindings: {
title: '<',
modalInstance: "<",
resolve: "<"
}, // two way data-binding
template: stmpl,
controller: tableRowController
});
})(window.angular);
</script>
</head>
<body>
<h2>Add New Person</h2>
<hr />
<form action="#">
<div class="form-horizontal" ng-app="addPerson" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label col-md-2" for="Title_Title_Title">Title</label>
<div class="col-md-10">
<select class="form-control" id="Title_Title_Title" name="Title.Title_Title" ng-value="selTitleVal"><option value="">** Select Title **</option>
<option value="104">Dr.</option>
<option value="103">Ma'am</option>
<option value="102">Miss</option>
<option value="100">Mr.</option>
<option value="101">Mrs.</option>
<option value="106">Smt.</option>
<option value="105">Sri</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="Title.Title_Title" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Person_FName">First Name</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Person_FName" name="Person_FName" ng-model="fname" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Person_FName" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Person_MI">MI</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Person_MI" name="Person_MI" ng-model="mi" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Person_MI" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Person_LName">Last Name</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Person_LName" name="Person_LName" ng-model="lname" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Person_LName" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create Person" class="btn btn-primary" />
</div>
</div>
<div class="container-fluid" style="padding:unset;margin:unset;">
<div class="row" style="padding:unset;margin:unset;">
<div class="col-md-12" style="padding:unset;margin:unset;">
<addresses id="addresses1" title="'Addresses'"></addresses>
</div>
</div>
</div>
</div>
</form>
</body>
</html>Here是工作plunker。
[使用'ng-repeat'當你有對象時不好意思]（https://docs.angularjs.org/api/ng/directive/select） –
完美地工作！在這種情況下，使用ng-repeat應該可以，因爲每個下拉列表中的選項數量不會太多。謝謝@沙拉布！ – sosspyker
@sosspyker upvote並接受我的答案，如果它適合你:) –
這很好用！我會選擇ng-repeat而不是ng-repeat，因爲根據文檔，ng-options似乎提供了更多的靈活性。謝謝！ – sosspyker