Giter Site home page Giter Site logo

cn-city-select's Introduction

ChinaCitySelect

test

This is a plugin to make it easy to add a China region selector into your Angular app.

Install

Install this plugin by using bower.

# enter your asset directory
bower install angular cn-city-select --save

Usage

  1. First of all you should load Angularjs in your page, and then load this plugin.

     <!-- place this code into your page -->
     <script type="text/javascript" src='/xxx/angular.min.js'></script>
     <script type="text/javascript" src='/xxx/cn-city-select.min.js'></script>
     <script type='text/javascript' src='/xxx/yourJS.js'></script>
    
  2. Then create your own Angular module, controller and city-select div.

     <div ng-app='yourModule'>
     	<div city-select></div>
     </div>
    
  3. Import the module into your module, and then the plugin works!

     // place this code into yourJS.js
     angular.module('yourModule', ['cnCitySelect'])
    
  4. There are two attributes belong to directive.

    • select-result: This attribute will pass a name of variable and provide a data binding between the variable and select result.
    • select-class: This attribute will pass a string which will be assigned to the class attribute of each select element.

Sample

This is a small sample of this plugin.

<html>
<meta charset="UTF-8">
<style>
  .test-class {margin: 30px 0 0 30px; font-size: 30px}
</style>
<body>
  <div ng-app='testModule'>
    <div ng-controller='testCtrl'>
      <div select-result='result' select-class='test-class' city-select></div>
      <p>{{result}}</p>
    </div>
  </div>
</body>
<script src='./angular.min.js'></script>
<script src='./cn-city-select.min.js'></script>
<script>
  angular.module('testModule', ['cnCitySelect']).controller('testCtrl', function ($scope) {});
</script>
</html>

demo

cn-city-select's People

Contributors

mrhuxu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

cn-city-select's Issues

我觉得这个还有待更新

昨天找到了这个插件,然后昨晚用了一下

设置城市没问题

可是关键还有一个读取

当你更新信息的时候

这个select是要有默认选中的地址的

由于设置和读取地址都是共用一个模板

<select ng-options></select>这个标签如果有默认选项还必须使用ng-model来绑定

这就会出现一个问题 :

当设置地址的时候是ng-model="province"

可是当有默认选项的时候ng-model="provinces[index]" 和设置地址时候的model完全冲突了

如何初始化地址?

首先很感谢你分享了这个插件,但是遇到一个比较难解决的问题就是在已经有地址的情况下,我该如何去初始化?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.