Question

我是Web UI编程的完全新手，并且正在处理从Web UI读取字典并将其发送到RESTful服务的任务。应该有一个＆＃34;添加＆＃34;单击按钮打开两个文本框以输入键和值。用户可以添加任意数量的键值对。

我完全迷失了如何开始解决这个问题。我是否创建了接收键和值并存储此类条目数组的模型？

如果有人可以指导我实现这个目标，那将会非常有帮助

// Model
export class entry {
   key : string;
   value : string;
}

export class KVMap {
   entries : entry[];
}

// controller - has a function to add entry into KVMap
KVMapParam: Models.KVMap
populateKVMap(entry : Models.Entry) {
 // push this entry into KVMapParam



//View
 <div class="panel panel-default">
     <div class="panel-heading">KVMap</div>
     <div class="panel-body">
         <ul>
             <li ng-repeat="entry in controller.KVMapParam">
                 <input type="text" ng-model="entry.key"/>
                 <input type="text" ng-model="entry.value" />
             </li>
             <li>
                 <button ng-click="controller.populateKVMap()">Add</button>
             </li>
         </ul>
     </div>
 </div>

Answer 1

我使基本设置正常工作，并且能够将值添加到控制器中的键值对

模型

export class entry {
   key : string;
   value : string;
}

export class KVMap {
   entries : entry[];
}

控制器

KVMapParam: Models.KVMap
populateKVMap() {
 KVMapParam.push(new entry("","")
}

查看

 <div class="panel panel-default">
     <div class="panel-heading">KVMap</div>
     <div class="panel-body">
        <div class="form-group">
         <table>
             <tbody>        
             <tr ng-repeat="entry in controller.KVMapParam">
                 <td><input class="form-control" type="text" data-content="{{entry.key}} onclick="this.select();" ng-model="entry.key"/></td>
                 <td><input class="form-control" type="text" data-content="{{entry.value}} onclick="this.select();" ng-model="entry.value"/></td>
             </tbody>
           </table>
        </div>
        <div class="form-group>
            <button ng-click="controller.populateKVMap()">Add</button>
         </div>
     </div>
 </div>

每次输入新的密钥/值时，我想检查密钥是否已存在于KVMapParam中。我看到我们可以在＆＃34;输入中使用ng-change＆＃34;标记以检测更改并调用适当的表达式

td><input class="form-control" type="text" data-content="{{entry.key}} `onclick="this.select();" ng-model="entry.key" ng-change="controller.checkifKeyExists(entry.key)"/></td>`

根据表达式checkifKeyExists（）的结果，如何显示错误消息？

在AngularJs / Typescript中读取输入并创建字典

1 个答案: